在實際的項目中，左邊樹形菜單，提供各種功能點擊，右邊一個面板，隨著左邊節(jié)點的選擇表現(xiàn)不同的功能內(nèi)容，這是一個相當(dāng)經(jīng)典的布局，在Ext框架中，有兩個控件TreePanel和TabPanel剛好完成這些功能，本文就這兩個控件的搭配使用和點擊左邊樹節(jié)點引起右邊內(nèi)容變化的方法作一個簡單的介紹。首先看下面的具體的代碼。
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, //不顯示根節(jié)點
root:new Ext.tree.TreeNode({
id:'root',
text:'功能菜單',
draggable:false,
expanded:true
})
});
//添加第一個節(jié)點(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) { //判斷是否已經(jīng)打開該面板
n = contentPanel.add({
'id':node.id,
'title':node.text,
closable:true, //通過html載入目標(biāo)頁
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="iframe.html"></iframe>'
});
}
contentPanel.setActiveTab(n);
}
}
}));
//添加第二個節(jié)點(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) { ////判斷是否已經(jīng)打開該面板
n = contentPanel.add({
'id':node.id,
'title':node.text,
closable:true,
autoLoad:{url:'auto.php', scripts:true} //通過autoLoad屬性載入目標(biāo)頁,如果要用到腳本,必須加上scripts屬性
});
}
contentPanel.setActiveTab(n);
}
}
}));
//添加第三個節(jié)點(function)
menuTree.root.appendChild(new Ext.tree.TreeNode({
id:'functionPanel',
text:'通過函數(shù)打開',
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);
}
}
}));
//通過擴(kuò)展來構(gòu)建要創(chuàng)建的面板
fnPanel = Ext.extend(Ext.Panel, {
closable:true,
autoScroll:true,
layout:'fit', //如果用函數(shù)來創(chuàng)建該面板的話,布局必須設(shè)置為fit,否則不會顯示該面板中的內(nèi)容
//創(chuàng)建面板內(nèi)容
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:'取消'}]
});
},
//重裝控件初始化函數(shù),在該函數(shù)中完成面板中內(nèi)容的初始化
initComponent:function() {
fnPanel.superclass.initComponent.call(this);
this.fp = this.createFormPanel();
this.add(this.fp);
}
});
//右邊具體功能面板區(qū)
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控件結(jié)合功能演示</div>'
}]
});
Ext.onReady(function(){
new Ext.Viewport({
layout:'border', //使用border布局
defaults:{activeItem:0},
items:[menuTree, contentPanel]
});
});
</script>
</head>
<body>
</body>
</html>
在實際的項目中，左邊樹形菜單，提供各種功能點擊，右邊一個面板，隨著左邊節(jié)點的選擇表現(xiàn)不同的功能內(nèi)容，這是一個相當(dāng)經(jīng)典的布局，在Ext框架中，有兩個控件TreePanel和TabPanel剛好完成這些功能，本文就這兩個控件的搭配使用和點擊左邊樹節(jié)點引起右邊內(nèi)容變化的方法作一個簡單的介紹。首先看下面的具體的代碼。
Js代碼:
上面代碼中，構(gòu)建了兩個控件menuTree和contentPanel，menuTree用來顯示具體功能菜單，contentPanel用來展示具體功能內(nèi)容，menutTree中的節(jié)點是通過appendChild()方法手動加上去的，而且為了介紹方便，每個節(jié)點都添加了一個處理點擊事件的函數(shù)，在具體應(yīng)用中，還可以使用AsyncTreeNode()和TreeLoader()動態(tài)載入節(jié)點，下面著重介紹點擊樹節(jié)點引起功能區(qū)變化的方法，上面代碼中用到了三種方法。
（1）通過TabPanel控件的html屬性配合<iframe>實現(xiàn)。該方法是利用html屬性中包含<iframe>的語法來調(diào)用另一個頁面，具體見代碼。該方法實現(xiàn)比較簡單，只要重新編輯一個html文件即可以了，而且如果要在新生成的頁面中再使用Ext的控件也比較簡單，也比較好控制，只要像一個頁面情況下使用就可以了，因為他本身就是一個完整的html文件。而該方法的缺點就是資源占用厲害，是三種方法中占有最厲害的，而且還有Ext的重復(fù)加載的問題（不知道Ext庫中考慮這種情況了沒有），另外就是新的頁面載入速度也是最慢的。
（2）通過TabPanel控件的autoLoad屬性實現(xiàn)。該方法是利用autoLoad屬性，它有很多參數(shù)，其中有兩個比較重要，url表示要載入的文件，scripts表示載入的文件是否含有腳本，該屬性相當(dāng)重要，如果在新的頁面中要創(chuàng)建Ext控件，必須指定該參數(shù)。該方法實現(xiàn)較前一個復(fù)雜，因為引入的文件不是一個完整的html文件，有可能只是內(nèi)容的一部分，但是資源占用較少，而且載入速度較快（它有一個載入指示），但缺點就是如果是載入的是一個單純html文件(*.html)，在字符編碼上處理很麻煩，經(jīng)常出現(xiàn)亂碼，我提供的源碼中是一個PHP文件，用PHP文件也只是一個作用，改變輸出的字符編碼，用html能夠?qū)崿F(xiàn)同樣的功能，但會是亂碼，我不知道怎樣解決這個問題。
（3）通過自己構(gòu)建新的面板來實現(xiàn)。該方法是通過繼承Panel面板，然后在該面板中加入要顯示的內(nèi)容，再重載initComponet()方法，最后把該面板添加到TabPanel中，該方法中一個要注意的地方，新生成的頁面布局一定要用fit，否則該面板中的內(nèi)容不能顯示出來。該方法是所有方法中最復(fù)雜的，而且由于采用了fit布局，新生成的頁面中的元素不好控制，我例子中的表單就生成的比較亂。但載入速度是最快的，可能是少了載入指示吧，資源占用跟第二種方法差不多。
上面三種方法中，我比較喜歡第二種實現(xiàn)方面，簡單好控制，而且還有一個載入指示。不知道大家有沒有其他的方法。一起討論討論。