在實際的項目中，左邊樹形菜單，提供各種功能點擊，右邊一個面板，隨著左邊節點的選擇表現不同的功能內容，這是一個相當經典的布局，在Ext框架中，有兩個控件TreePanel和TabPanel剛好完成這些功能，本文就這兩個控件的搭配使用和點擊左邊樹節點引起右邊內容變化的方法作一個簡單的介紹。首先看下面的具體的代碼。
JS代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TabPanel和Tree控件搭配測試</title>
<link rel="stylesheet" type="text/css" media="all" href="../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript" src="../ext/build/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';</script>
<script type="text/javascript">
//左邊功能樹
var menuTree = new Ext.tree.TreePanel({
region:'west',
title:'功能菜單',
width:180,
minSize:150,
maxSize:200,
split:true,
autoScroll:true,
autoHeight:false,
collapsible:true,
rootVisable:false, //不顯示根節點
root:new Ext.tree.TreeNode({
id:'root',
text:'功能菜單',
draggable:false,
expanded:true
})
});
//添加第一個節點(html)
menuTree.root.appendChild(new Ext.tree.TreeNode({
id:'htmlPanel',
text:'通過html打開',
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);
}
}
}));
//添加第二個節點(autoLoad)
menuTree.root.appendChild(new Ext.tree.TreeNode({
id:'autoLoadPanel',
text:'通過autoLoad打開',
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,
autoLoad:{url:'auto.php', scripts:true} //通過autoLoad屬性載入目標頁,如果要用到腳本,必須加上scripts屬性
});
}
contentPanel.setActiveTab(n);
}
}
}));
//添加第三個節點(function)
menuTree.root.appendChild(new Ext.tree.TreeNode({
id:'functionPanel',
text:'通過函數打開',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = contentPanel.getComponent(node.id);
if (!n) {
var p = new fnPanel();
p.id = node.id;
p.title = node.text;
n = contentPanel.add(p);
}
contentPanel.setActiveTab(n);
}
}
}));
//通過擴展來構建要創建的面板
fnPanel = Ext.extend(Ext.Panel, {
closable:true,
autoScroll:true,
layout:'fit', //如果用函數來創建該面板的話,布局必須設置為fit,否則不會顯示該面板中的內容
//創建面板內容
createFormPanel:function() {
return new Ext.form.FormPanel({
buttonAlign:'center',
labelAlign:'right',
frame:false,
bodyBorder:false,
bodyStyle:'padding:25px',
items:[{
xtype:'textfield',
fieldLabel:'用戶名',
width:350,
name:'username'
},{
xtype:'textfield',
fieldLabel:'密 碼',
width:350,
name:'password'
}],
buttons:[{text:'登陸'}, {text:'取消'}]
});
},
//重裝控件初始化函數,在該函數中完成面板中內容的初始化
initComponent:function() {
fnPanel.superclass.initComponent.call(this);
this.fp = this.createFormPanel();
this.add(this.fp);
}
});
//右邊具體功能面板區
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>'
}]
});
Ext.onReady(function(){
new Ext.Viewport({
layout:'border', //使用border布局
defaults:{activeItem:0},
items:[menuTree, contentPanel]
});
});
</script>
</head>
<body>
</body>
</html>
在實際的項目中，左邊樹形菜單，提供各種功能點擊，右邊一個面板，隨著左邊節點的選擇表現不同的功能內容，這是一個相當經典的布局，在Ext框架中，有兩個控件TreePanel和TabPanel剛好完成這些功能，本文就這兩個控件的搭配使用和點擊左邊樹節點引起右邊內容變化的方法作一個簡單的介紹。首先看下面的具體的代碼。
Js代碼:
上面代碼中，構建了兩個控件menuTree和contentPanel，menuTree用來顯示具體功能菜單，contentPanel用來展示具體功能內容，menutTree中的節點是通過appendChild()方法手動加上去的，而且為了介紹方便，每個節點都添加了一個處理點擊事件的函數，在具體應用中，還可以使用AsyncTreeNode()和TreeLoader()動態載入節點，下面著重介紹點擊樹節點引起功能區變化的方法，上面代碼中用到了三種方法。
（1）通過TabPanel控件的html屬性配合<iframe>實現。該方法是利用html屬性中包含<iframe>的語法來調用另一個頁面，具體見代碼。該方法實現比較簡單，只要重新編輯一個html文件即可以了，而且如果要在新生成的頁面中再使用Ext的控件也比較簡單，也比較好控制，只要像一個頁面情況下使用就可以了，因為他本身就是一個完整的html文件。而該方法的缺點就是資源占用厲害，是三種方法中占有最厲害的，而且還有Ext的重復加載的問題（不知道Ext庫中考慮這種情況了沒有），另外就是新的頁面載入速度也是最慢的。
（2）通過TabPanel控件的autoLoad屬性實現。該方法是利用autoLoad屬性，它有很多參數，其中有兩個比較重要，url表示要載入的文件，scripts表示載入的文件是否含有腳本，該屬性相當重要，如果在新的頁面中要創建Ext控件，必須指定該參數。該方法實現較前一個復雜，因為引入的文件不是一個完整的html文件，有可能只是內容的一部分，但是資源占用較少，而且載入速度較快（它有一個載入指示），但缺點就是如果是載入的是一個單純html文件(*.html)，在字符編碼上處理很麻煩，經常出現亂碼，我提供的源碼中是一個PHP文件，用PHP文件也只是一個作用，改變輸出的字符編碼，用html能夠實現同樣的功能，但會是亂碼，我不知道怎樣解決這個問題。
（3）通過自己構建新的面板來實現。該方法是通過繼承Panel面板，然后在該面板中加入要顯示的內容，再重載initComponet()方法，最后把該面板添加到TabPanel中，該方法中一個要注意的地方，新生成的頁面布局一定要用fit，否則該面板中的內容不能顯示出來。該方法是所有方法中最復雜的，而且由于采用了fit布局，新生成的頁面中的元素不好控制，我例子中的表單就生成的比較亂。但載入速度是最快的，可能是少了載入指示吧，資源占用跟第二種方法差不多。
上面三種方法中，我比較喜歡第二種實現方面，簡單好控制，而且還有一個載入指示。不知道大家有沒有其他的方法。一起討論討論。