以下是全部代码,使用的是extjs4.2.1,,代码复制即可使用:
Ext.onReady(panelLayout); function panelLayout() { //新建tabpanel var tab = Ext.create('Ext.TabPanel', { region : 'center', deferredRender : false, activeTab : 0, resizeTabs : true, // turn on tab resizing minTabWidth : 115, tabWidth : 135, enableTabScroll : true }); var viewPort = Ext.create('Ext.Viewport', { layout : "border", items : [ { region : 'north', minHeight : 100, html : 'north' }, { title : 'West Region is collapsible', region : 'west', xtype : 'panel', width : 200, collapsible : true, // 设置可折叠 id : 'west-region-container', layout : 'fit', margins : '0 0 0 0', layout : 'accordion', title : '菜单', split : true, collapsible : true, layoutConfig : { animate : true }, items : [{ title : '业务信息处理', xtype : 'treepanel', expanded : true, animate : true, enableDD : false, border : false, containerScroll : true, root : { text : '..', id:'root', children : [{ text : '业务信息', id : 'bussinessInfo_gotoBusinessInfo.do', leaf : true }, { text : '组织管理', leaf : true, id :'dept_list.jsp' }] }, listeners:{ //添加节点点击事件 itemclick: function(v,r,item){ var n = tab.getComponent(r.raw.id); if(r.raw.id=='root'){ return; } if (!n) { // 判断是否已经打开该面板 n = tab.add({ 'id' : r.raw.id, 'title' : r.raw.text, closable : true, // 通过html载入目标页 html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+r.raw.id+'"></iframe>' }); } tab.setActiveTab(n); } } }, { title : '信息中心', border : false, html : '<div id="tree2" style="overflow:auto;width:100%;height:100%"></div>' }, { title : '系统设置', border : false, html : '<div id="tree3" style="overflow:auto;width:100%;height:100%"></div>' }] },tab, { region : 'south', minHeight : 25, html:"<div align='center'>版权所有 xxxx有限公司 © 信息服务中心</div>" } ] }) }