常用布局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"
}]
});
});