整体布局是viewport 点击左边导航按钮天机一个tab 如tab存在 则聚焦该tab否则添加新的tab
下面直接上代码
var view = null; Ext.onReady(function() { var accordion = Ext.create("Ext.panel.Panel",{ title : "左侧导航",layout : "accordion",//设置为手风琴布局 layoutConfig : { animate : true },width : 250,minWidth : 90,region : "west",//设置方位 split : true,collapsible : true,items : [ { title : "客户管理",items:[{ text:'客户列表',xtype : 'button',width:240,height:30,margin : 5,maxWidth : 245,handler : function(){ addTable("客户列表",myjs.createGridPanel(ctx+"/json/datagrid_data1.json",view.getComponent("tabs").getHeight())); } },{ text:'下拉框',handler : function(){ addTable("下拉框",myjs.createComBox()); } },{ text:'Panel',handler : function(){ addTable("Panel",myjs.createPanel()); } },{ text:'FormPanel',handler : function(){ addTable("FormPanel",myjs.createFormPanel()); myjs.openQuickTips(); } },{ text:'TreePanel',handler : function(){ addTable("TreePanel",myjs.createTreePanel()); } } ] },{ title : "嵌套面板二",html : "嵌套面板二",iconCls : "search" },{ title : "嵌套面板三",html : "嵌套面板三",iconCls : "back" },{ title : "嵌套面板四",html : "嵌套面板四",iconCls : "12" } ] }); view = new Ext.Viewport({ title : "Viewport",layout : "border",//这里是(border)边界布局 defaults : { bodyStyle : "background-color: #FFFFFF;",frame : true },items : [ accordion,//这里是(accordion)手风琴布局 { region : "north",height : 100,html:'<center><b><h1>欢迎进入XX管理系统!</h1></b></center>' },{ //tabs选项卡渲染到center region : "center",id : "tabs",xtype : 'tabpanel',split : true,border : true,frame : true,},{ region : "south",html:'<center><h3>技术支持:<a href="http://www,baidu.com">XX有限公司</a></h3></center>' } ] }); function addTable(title,items) { var tabPanel = view.getComponent("tabs"); var newTab = tabPanel.getChildByElement(title); if (newTab == null) { newTab = tabPanel.add({ title : title,id : title,region : "center",closable : true,height:300,height:800,items: items }); } tabPanel.setActiveTab(newTab); tabPanel.doLayout(); } height = view.getComponent("tabs").getHeight(); });