Extjs中透過Tree載入右側TabPanel具體實作_extjs

最近在做一個物流管理的項目，公司必須要求用Extjs4.1來做介面，因為以前一直也沒有接觸過所以開發的過程中遇到了很多的困難。同時Extjs4.1的資料在網路上也相對來說較少。好了，不說廢話上代碼：
1.左側的功能樹

複製代碼 程式碼如下:

Ext.define("AM.view.SystemTree", {
extend : 'Ext.tree.Panel',
alias : 'widget.systemTree',
rootVisible : false,// 不展示ROOT
displayField : 'text',
// title:'物流運輸系統',
viewConfig : { // 具有拖曳功能
plugins : {
ptype : 'treeviewdragdrop'
},
listeners : { // 拖曳
drop : function(node, data, overModel, dropPosition, options) {
aldropPosition, options) {
。 : " data.records[0].get('text') " 移到: "
overModel.get('text'));
}
}
},
dockedItems : [ {
xtype : 'toolbar',
items : [ {
xtype : 'button',
id : 'allopen',
icon : 'resources/img/lock_open.png ',
text : '展開全部'
}, {
xtype : 'button',
id : 'allclose',
icon : 'resources/img/lock.png',
text : '收起全部'
} ]
} ],
root : {
text : 'root',
leaf : false,
id : '0 ',
children : [ {
text : '運輸管理',
checked : false, // 顯示被選中
leaf : false, // 是否是葉子節點
icon : ' resources/img/folder_user.png',
id : '01',
children : [ {
text : '車輛資訊管理',
checked : false,
icon : 'resources /img/report_edit.png',
leaf : true,
id : 'vehiclelist',　　//主要的要點在這裡，這裡的id要指定為你要打開的那個視圖的別名
} ]
}]
}
});

重點介紹
：
•tree 一定不要忘記加別名alias
•設定樹狀結構的子節點的id值為你需要在右側顯示的view的別名alias（重要）　​​------可參考下方的view代碼2.需要開啟的對應的view

複製程式碼

程式碼如下:

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

});

3.建立一個右邊的TabPanel 複製程式碼

程式碼如下:


Ext.define('AM.view.TabPanel',{ //主頁面的tab面板
extend: 'Ext.tab.Panel',
alias:'widget.tabpanel',
closeAction: ' destroy',
defaults :{
bodyPadding: 10
},
items: [{
title: '首頁',
autoLoad:'content.jsp'　　　基本的panel
}],

});

4.設置點擊tree的觸發事件複製代碼

程式碼如下:


'systemTree':{
itemclick:function(tree,record,item,index,e,options){
var tabs>var tabs = tree.ownerCt.ownerCt.ownerCt
.child('#center-grid').child("#tabpanel");
//取得目前點擊的節點
var tree=record.raw;
var id = treeNode.id;
var text=treeNode.text;
//取得點擊的樹節點相同的tab標籤
var tab = tabs.getComponent(id);
if(!tab){//如果不存在
tabs.add({//用點擊樹的節點的ID、text新建一個tab
id:id,
closable: true,
title:text,
iconCls:id,
xtype:id　　//將tree設定好的id對應的TabPanel中去，相當與把對應的view填充到TabPanel中
}).show() ;
}else{//如果存在
tabs.setActiveTab(tab);//Active
}
}

},
Rendering of the result:

Summary: The effect produced by Extjs is indeed very dazzling, but it is also difficult to learn, especially the newer version, online It's hard to find any good tutorials. Fortunately, we have an API. You can practice more with the examples in the API, so you can master it quickly. I just came into contact with Extjs recently, I hope you guys won’t complain!