extjs 经典布局
// 左边功能树var menuTree = new Ext.tree.TreePanel({region : 'west',title : '功能菜单',width : 180,minSize : 150,maxSize : 200,split : true,autoScroll : true,autoHeight : false,collapsible : true,rootVisable : false,// 不显示根节点root : new Ext.tree.TreeNode({ id : 'root', text : '功能菜单', draggable : false, expanded : true})});// 添加第一个节点(html)menuTree.root.appendChild(new Ext.tree.TreeNode({id : 'htmlPanel',text : '通过html打开',listeners : { 'click' : function(node, event) { event.stopEvent(); var n = contentPanel.getComponent(node.id); if (!n) { // 判断是否已经打开该面板 n = contentPanel.add({ 'id' : node.id, 'title' : node.text, closable : true, html : '<div>通过html载入目标页面html代码</div>' // 通过html载入目标页 }); } contentPanel.setActiveTab(n); }}}));// 添加第二个节点(autoLoad)menuTree.root.appendChild(new Ext.tree.TreeNode({id : 'autoLoadPanel',text : '通过autoLoad打开',listeners : { 'click' : function(node, event) { event.stopEvent(); var n = contentPanel.getComponent(node.id); if (!n) { //判断是否已经打开该面板 n = contentPanel.add({ 'id' : node.id, 'title' : node.text, closable : true, // 通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性 autoLoad : { url : 'http://localhost:8080/myssh2/index.jsp', scripts : true } }); } contentPanel.setActiveTab(n); }}}));// 添加第三个节点(function)menuTree.root.appendChild(new Ext.tree.TreeNode({id : 'functionPanel',text : '通过函数打开',listeners : { 'click' : function(node, event) { event.stopEvent(); var n = contentPanel.getComponent(node.id); if (!n) { var p = new fnPanel(); p.id = node.id; p.title = node.text; n = contentPanel.add(p); } contentPanel.setActiveTab(n); }}}));// 通过扩展来构建要创建的面板fnPanel = Ext.extend(Ext.Panel, {closable : true,autoScroll : true,layout : 'fit',// 如果用函数来创建该面板的话,布局必须设置为fit,否则不会显示该面板中的内容// 创建面板内容createFormPanel : function() { return new Ext.form.FormPanel({ buttonAlign : 'center', labelAlign : 'right', frame : false, bodyBorder : false, bodyStyle : 'padding:25px', items : [{ xtype : 'textfield', fieldLabel : '用户名', width : 350, name : 'username' }, { xtype : 'textfield', fieldLabel : '密 码', width : 350, name : 'password' }], buttons : [{ text : '登陆' }, { text : '取消' }] });},// 重装控件初始化函数,在该函数中完成面板中内容的初始化initComponent : function() { fnPanel.superclass.initComponent.call(this); this.fp = this.createFormPanel(); this.add(this.fp);}});// 右边具体功能面板区var contentPanel = new Ext.TabPanel({region : 'center',enableTabScroll : true,activeTab : 0,items : [{ id : 'homePage', title : '首页', autoScroll : true, //html : '<h1>Hello 东东</h1>' autoLoad : { url : 'http://localhost:8080/myssh2/index.jsp', scripts : true }}]});Ext.onReady(function() {new Ext.Viewport({ layout : 'border', //使用border布局 defaults : { activeItem : 0 }, items : [{ region : "north", height : 50, html : '<center><h1>此处显示标题图片</h1></center>' }, menuTree, contentPanel, { region : "south", height : 50, html : '<center><h1>此处显示版权信息</h1></center>' }]});});
页:
[1]