Specific implementation of loading the right TabPanel through Tree in Extjs

Specific implementation of loading the right TabPanel through Tree in Extjs_extjs

WBOY

Release： 2016-05-16 17:34:37

Original

851 people have browsed it

Recently I was working on a logistics management project, and the company required the use of Extjs4.1 for the interface. Since I had never been exposed to it before, I encountered many difficulties during the development process. At the same time, there is relatively little information about Extjs4.1 on the Internet. Okay, without further ado, let’s get on with the code:
1. Function tree on the left

Copy code The code is as follows:

 
Ext.define("AM.view.SystemTree", { 
extend : 'Ext.tree.Panel', 
alias : 'widget.systemTree', 
rootVisible : false, // Do not display ROOT 
displayField : 'text', 
// title: 'Logistics and transportation system', 
viewConfig : { // With drag and drop function 
plugins : { 
ptype : 'treeviewdragdrop' 
}, 
listeners : { // Drag
drop : function(node, data, overModel, dropPosition, options) { 
alert("Put : " data.records[0].get('text') " Moved to: " 
 overModel.get('text')); 
} 
} 
}, 
dockedItems : [ { 
xtype : 'toolbar', 
items : [ { 
xtype : 'button', 
id : 'allopen', 
icon : 'resources/img/lock_open.png ', 
text : 'Expand all' 
}, { 
xtype : 'button', 
id : 'allclose', 
icon : 'resources/img/lock.png', 
text : 'Collapse all' 
} ] 
} ], 
root : { 
text : 'root', 
leaf : false, 
id : '0 ', 
children : [ { 
text : 'Transportation Management', 
checked : false, // Display selected
leaf : false, // Whether it is a leaf node
icon : ' resources/img/folder_user.png', 
id : '01', 
children : [ { 
text : 'Vehicle Information Management', 
checked : false, 
icon : 'resources /img/report_edit.png', 
leaf : true, 
id : 'vehiclelist', //The main point is here, the id here should be specified as the alias of the view you want to open 
} ] 
}] 
} 
}); 

Key points :
•Tree must not forget to add alias alias
•Settings The id value of the child node of the tree structure is the alias of the view you need to display on the right (important) ------Please refer to the view code below
2. The corresponding view that needs to be opened

Copy code The code is as follows:

 
Ext.define("AM.view. transportation.VehicleList",{ 
extend:'Ext.grid.Panel', 
alias:'widget.vehiclelist', //The alias must be set here 
id:'vehiclelist', 
store :'VehicleStore', 
　...The intermediate code is omitted 
columns: [ 
{text:'Vehicle Number', dataIndex: 'vehicleNo', 
field:{ 
xtype :'textfield', 
allowBlank:false 
} 
}, 
{text:'Vehicle description',xtype:'templatecolumn', 
tpl:'The number of the vehicle is {vehicleNo} The area is {vehicleArea}' 
} 
], 
initComponent:function(){ 
this.callParent(arguments); 
} 
}); 

3. Create a TabPanel on the right

Copy the code The code is as follows:

 
 Ext.define('AM.view.TabPanel',{ //The tab panel of the main page
extend: 'Ext.tab.Panel', 
alias:'widget.tabpanel', 
closeAction: ' destroy', 
defaults :{ 
bodyPadding: 10 
}, 
items: [{ 
title: 'Homepage', 
autoLoad:'content.jsp'　　 //Only one Basic panel 
}], 
}); 

4. Set the trigger event for clicking the tree

Copy code The code is as follows:

 
'systemTree':{ 
itemclick:function(tree,record,item,index,e,options){ 
var tabs = tree.ownerCt.ownerCt.ownerCt 
.child('#center-grid').child("#tabpanel"); 
//Get the currently clicked node
var treeNode=record.raw; 
var id = treeNode.id; 
var text=treeNode.text; 
//Get the same tab label of the clicked tree node 
var tab = tabs.getComponent(id); 
 if(!tab){//If it does not exist 
tabs.add({//Create a new tab using the ID and text of the node clicked on the tree 
id:id, 
closable: true, 
 title:text, 
iconCls:id, 
xtype:id　 //Put the id corresponding to the tree set into the TabPanel, which is equivalent to filling the corresponding view into the TabPanel 
}).show() ; 
}else{//If exists 
tabs.setActiveTab(tab);//Active 
} 
} 
}, 

結果のレンダリング:
Specific implementation of loading the right TabPanel through Tree in Extjs_extjs

概要: Extjs によって生成される効果は確かに非常に素晴らしいですが、特に新しいバージョンをオンラインで学習するのは困難です。良いチュートリアルを見つけるのは難しい。幸いなことに、API があるので、API の例を使用してさらに練習できるので、すぐにマスターできます。私は最近 Extjs に出会ったばかりですが、文句を言わないでください。