整体布局是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:'下拉框',
xtype : 'button',
width:240,
height:30,
margin : 5,
maxWidth : 245,
handler : function(){
addTable("下拉框",myjs.createCombox());
}
},{
text:'Panel',
xtype : 'button',
width:240,
height:30,
margin : 5,
maxWidth : 245,
handler : function(){
addTable("Panel",myjs.createPanel());
}
},{
text:'FormPanel',
xtype : 'button',
width:240,
height:30,
margin : 5,
maxWidth : 245,
handler : function(){
addTable("FormPanel",myjs.createFormPanel());
myjs.openQuickTips();
}
},{
text:'TreePanel',
xtype : 'button',
width:240,
height:30,
margin : 5,
maxWidth : 245,
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,
collapsible : true,
html:'<center><b><h1>欢迎进入XX管理系统!</h1></b></center>'
}, { //tabs选项卡渲染到center
region : "center",
id : "tabs",
xtype : 'tabpanel',
split : true,
border : true,
collapsible : true,
frame : true,
}, {
region : "south",
split : true,
border : true,
collapsible : true,
height : 100,
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();
});