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"
}]
});
});