最近在做一個物流管理的項目，公司必須要求用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) {
alert("把: " + 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("AM.view.transportation.VehicleList",{
extend:'Ext.grid.Panel',
alias:'widget.vehiclelist', //這里一定要設置別名
id:'vehiclelist',
store:'VehicleStore',
......中間代碼省略
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 = tree.ownerCt.ownerCt.ownerCt
.child('#center-grid').child("#tabpanel");
//獲取當前點擊的節點
var treeNode=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
}
}
},
結果上效果圖:
總結：Extjs做出來的效果確實很炫，但是學起來也有一定的難度，特別是比較新的版本，網上很難找到什么好的教程。還好我們有API，可以多對著API中的例子進行練習，這樣掌握起來也很快。最近才接觸Extjs，希望各位大神不要吐槽!
