用Extjs4.1來(lái)做界面，有關(guān)Extjs4.1資料在網(wǎng)上也相對(duì)來(lái)說(shuō)較少，下面是具體的實(shí)現(xiàn)代碼1.左側(cè)的功能樹(shù)2.需要打開(kāi)的對(duì)應(yīng)的view，有類似需求的朋友可以參考下哈

最近在做一個(gè)物流管理的項(xiàng)目，公司必須要求用Extjs4.1來(lái)做界面，因?yàn)橐郧耙恢币矝](méi)有接觸過(guò)所以開(kāi)發(fā)的過(guò)程中遇到了很多的困難。同時(shí)Extjs4.1的資料在網(wǎng)上也相對(duì)來(lái)說(shuō)較少。好了，不說(shuō)廢話上代碼：
1.左側(cè)的功能樹(shù)

復(fù)制代碼代碼如下:

 
Ext.define("AM.view.SystemTree", { 
extend : 'Ext.tree.Panel', 
alias : 'widget.systemTree', 
rootVisible : false,// 不展示ROOT 
displayField : 'text', 
// title:'物流運(yùn)輸系統(tǒng)', 
viewConfig : { // 具有拖拽功能 
plugins : { 
ptype : 'treeviewdragdrop' 
}, 
listeners : { // 拖拽 
drop : function(node, data, overModel, dropPosition, options) { 
alert("把: " + data.records[0].get('text') + " 移動(dòng)到: " 
+ overModel.get('text')); 
} 
} 
}, 
dockedItems : [ { 
xtype : 'toolbar', 
items : [ { 
xtype : 'button', 
id : 'allopen', 
icon : 'resources/img/lock_open.png', 
text : '展開(kāi)全部' 
}, { 
xtype : 'button', 
id : 'allclose', 
icon : 'resources/img/lock.png', 
text : '收起全部' 
} ] 
} ], 
root : { 
text : 'root', 
leaf : false, 
id : '0', 
children : [ { 
text : '運(yùn)輸管理', 
checked : false, // 顯示被選中 
leaf : false, // 是否是葉子節(jié)點(diǎn) 
icon : 'resources/img/folder_user.png', 
id : '01', 
children : [ { 
text : '車(chē)輛信息管理', 
checked : false, 
icon : 'resources/img/report_edit.png', 
leaf : true, 
id : 'vehiclelist',　　//主要的要點(diǎn)在這里，這里的id要指定為你要打開(kāi)的那個(gè)視圖的別名 
}] 
}] 
} 
}); 

要點(diǎn)介紹：
•tree一定不要忘記添加別名alias
•設(shè)置樹(shù)形結(jié)構(gòu)的子節(jié)點(diǎn)的id值為你需要在右側(cè)顯示的view的別名alias（重要）　------可參考下方的view代碼
2.需要打開(kāi)的對(duì)應(yīng)的view

復(fù)制代碼代碼如下:

 
Ext.define("AM.view.transportation.VehicleList",{ 
extend:'Ext.grid.Panel', 
alias:'widget.vehiclelist', 　　//這里一定要設(shè)置別名 
id:'vehiclelist', 
store:'VehicleStore', 
　　　　......中間代碼省略 
columns : [ 
{text:'車(chē)輛編號(hào)',dataIndex:'vehicleNo', 
field:{ 
xtype:'textfield', 
allowBlank:false 
} 
}, 
{text:'車(chē)輛描述',xtype:'templatecolumn', 
tpl:'車(chē)輛的編號(hào)為{vehicleNo} 所在地區(qū)為{vehicleArea}' 
} 
], 
initComponent:function(){ 
this.callParent(arguments); 
} 
}); 

3.建立一個(gè)右側(cè)的TabPanel

復(fù)制代碼代碼如下:

 
Ext.define('AM.view.TabPanel',{ //主頁(yè)面的tab面板 
extend: 'Ext.tab.Panel', 
alias:'widget.tabpanel', 
closeAction: 'destroy', 
defaults :{ 
bodyPadding: 10 
}, 
items: [{ 
title: '主頁(yè)', 
autoLoad:'content.jsp'　　　　//只有一個(gè)基本的panel 
}], 
}); 

4.設(shè)置點(diǎn)擊tree的觸發(fā)事件

復(fù)制代碼代碼如下:

 
'systemTree':{ 
itemclick:function(tree,record,item,index,e,options){ 
var tabs = tree.ownerCt.ownerCt.ownerCt 
.child('#center-grid').child("#tabpanel"); 
//獲取當(dāng)前點(diǎn)擊的節(jié)點(diǎn) 
var treeNode=record.raw; 
var id = treeNode.id; 
var text=treeNode.text; 
//獲取點(diǎn)擊的樹(shù)節(jié)點(diǎn)相同的tab標(biāo)簽 
var tab = tabs.getComponent(id); 
if(!tab){//如果不存在 
tabs.add({//用點(diǎn)擊樹(shù)的節(jié)點(diǎn)的ID、text新建一個(gè)tab 
id:id, 
closable: true, 
title:text, 
iconCls:id, 
xtype:id　　//將tree設(shè)置好的id對(duì)應(yīng)的TabPanel中去，相當(dāng)與把對(duì)應(yīng)的view填充到TabPanel中 
}).show(); 
}else{//如果存在 
tabs.setActiveTab(tab);//Active 
} 
} 
}, 

結(jié)果上效果圖:

總結(jié)：Extjs做出來(lái)的效果確實(shí)很炫，但是學(xué)起來(lái)也有一定的難度，特別是比較新的版本，網(wǎng)上很難找到什么好的教程。還好我們有API，可以多對(duì)著API中的例子進(jìn)行練習(xí)，這樣掌握起來(lái)也很快。最近才接觸Extjs，希望各位大神不要吐槽!