ext中结合layout tab gird menu的例子（未完成）
目标：在layoutr 的west显示 tree，在center显示tab，在tab里显示gird（待处理）。
点tree中菜单项，可在center中显示所指向的页面。
1、layout .jsp 引用layout.js 和 tree.js。
html代码提交不了。简单列举div的层次关系：
id="container"
id="header" class="x-layout-inactive-content"
id="menus"></d
id="content" class="x-layout-inactive-content
id="tabs"
id="desktop"
id="demotab"
id="footer" class="x-layout-inactive-content"
2、layout.js 其中包括两个tab。
Ext.onReady(function() {
Example = function() {
return {
init : function() {
var layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 35
},
south: {
split:false,
initialSize: 20
},
west: {
split:false,
initialSize: 200,
collapsible: false
},
center: {
closeOnTab: true,
autoScroll: true
}
});
layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('header', {fitToFrame:true}));
layout.add('south', new Ext.ContentPanel('footer', {fitToFrame:true}));
layout.add('west', new Ext.ContentPanel('menus', {title: '菜单', fitToFrame:true}));
var tabs = new Ext.TabPanel('tabs');
tabs.addTab('desktop', "我的桌面");
var demotab = tabs.addTab('demotab', "测试管理",true);
demotab.setUrl("list.jsp", null, true);
tabs.activate('desktop');
//layout.add('center', new Ext.ContentPanel('content',{fitToFrame:true,autoScroll: true, resizeEl: 'center-iframe'}));
layout.add('center', new Ext.ContentPanel('content'));
layout.endUpdate();
}
};
}();
Ext.EventManager.onDocumentReady(Example.init, Example, true);
});
3、tree.js 在layout.jsp页面中显示菜单。
Ext.onReady(function() {
Example = function() {
return {
init : function() {
// shorthand
var Tree = Ext.tree;
var tree = new Tree.TreePanel('menus', {
animate:true,
loader: new Tree.TreeLoader({
dataUrl:'/demo/action/menuAction.jsp'
}),
enableDD:true,
containerScroll: true
});
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Ext JS',
draggable:false,
id:'source',
href:'/demo/action/menuAction.jsp'
});
tree.setRootNode(root);
// render the tree
tree.render();
root.expand();
tree.on('click', function (node) {
if (node.isLeaf()) {
Ext.get('content').dom.src = node.attributes.href;
}
}, null, {delegate: 'a', stopEvent:true});
}
};
}();
Ext.EventManager.onDocumentReady(Example.init, Example, true);
});
4、list.jsp
请参考 http://extjs.com/learn/Tutorial:Using_Ext_grid_form_dialog_to_achieve_paging_list,_create,_edit,_delete_function
需解决的问题：
1、在tab里不能显示gird。即demotab.setUrl("list.jsp", null, true);执行后，gird不显示。
2、点菜单项，为新窗口打开页面，不是在layout的center中显示。
请高手指定！！多谢！
<div />
页:
[1]