常用布局border(treePanle+tabPanle)

Ext.onReady(function(){

//左边
var root = new Ext.tree.TreeNode({
id:"root",
text:"我是根"
});
root.appendChild(new Ext.tree.TreeNode({
id:"c1",
text:"我是节点1",
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载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="iframe.html"></iframe>'
});
}
contentPanel.setActiveTab(n);
}
}
}));
root.appendChild(new Ext.tree.TreeNode({
id:"c2",
text:"我是节点1",
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载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="iframe.html"></iframe>'
});
}
contentPanel.setActiveTab(n);
}
}
}));
var tree = new Ext.tree.TreePanel({
region:'west',
title:'合同管理系统',
width:180,
minSize:150,
maxSize:200,
split:true,
autoScroll:true,
autoHeight:false,
collapsible:true,
rootVisable:false, //不显示根节点
root:root
});
//右边具体功能面板区
var contentPanel = new Ext.TabPanel({
region:'center',
enableTabScroll:true,
activeTab:0,
items:[{
id:'homePage',
title:'首页',
autoScroll:true,
html:'<div style="position:absolute;color:#ff0000;top:40%;left:40%;">Tree控件和TabPanel控件结合功能演示</div>'
}]
});
var viewport = new Ext.Viewport({
layout:"border",
//renderTo:Ext.getBody(),
items:[{
region:"north",
xtype:"panel",
html:"North"
},tree,{
region:"east",
xtype:"panel",
//split:true,//用户自动改变各个区域的大小
width:200,
html:"West",
title:"west",
collapsible:true//可折叠

},contentPanel,{
region:"south",
xtype:"panel",
html:"West"
}]
});
});