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