Specific implementation of loading TabPanel on the right using Tree in Extjs

Recently, I was working on a logistics management project. The company must use Extjs4.1 as the interface, because I have never been in touch with it before, so I encountered a lot of difficulties in the development process. At the same time, Extjs4.1 has less information on the Internet. Okay, let alone the Code:
1. function tree on the left
Copy codeThe Code is as follows:
Ext. define ("AM. view. SystemTree ",{
Extend: 'ext. tree. Panel ',
Alias: 'widget. systemtree ',
RootVisible: false, // do not show ROOT
DisplayField: 'text ',
// Title: 'logistics and transportation system ',
ViewConfig: {// drag/drop
Plugins :{
Ptype: 'treeviewdragdrop'
},
Listeners: {// drag
Drop: function (node, data, overModel, dropPosition, options ){
Alert ("Move:" + data. records [0]. get ('text') + ":"
+ OverModel. get ('text '));
}
}
},
DockedItems :[{
Xtype: 'toolbar ',
Items :[{
Xtype: 'button ',
Id: 'allopen ',
Icon: 'resources/img/lock_open.png ',
Text: 'Show all'
},{
Xtype: 'button ',
Id: 'allclose ',
Icon: 'resources/img/lock.png ',
Text: 'hide all'
}]
}],
Root :{
Text: 'root ',
Leaf: false,
Id: '0 ',
Children :[{
Text: 'Transport 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 here. The id here specifies the alias of the view you want to open.
}]
}]
}
});

Key Points:
• Do not forget to add the alias to the tree
• Set the id value of the subnode of the tree structure as the alias (important) of the view to be displayed on the right. ------ refer to the view code below
2. view
Copy codeThe Code is as follows:
Ext. define ("AM. view. transportation. VehicleList ",{
Extend: 'ext. grid. Panel ',
Alias: 'widget. vehiclelist', // you must set an alias 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: 'Vehicle ID: {vehicleNo} region: {vehicleArea }'
}
],
InitComponent: function (){
This. callParent (arguments );
}
});

3. Create a TabPanel on the right
Copy codeThe Code is as follows:
Ext. define ('am. view. TabPanel ', {// tab panel on the home page
Extend: 'ext. tab. Panel ',
Alias: 'widget. tabpanel ',
CloseAction: 'deststroy ',
Defaults :{
BodyPadding: 10
},
Items :[{
Title: 'homepage ',
AutoLoad: 'content. jsp '// there is only one basic panel
}],
});

4. Set the trigger event of the click tree.
Copy codeThe Code is as follows:
'Systemtree ':{
Itemclick: function (tree, record, item, index, e, options ){
Var tabs = tree. ownerCt
. Child ('# center-grid'). child ("# tabpanel ");
// Obtain the node currently clicked
Var treeNode = record. raw;
Var id = treeNode. id;
Var text = treeNode. text;
// Obtain the same tab for the clicked Tree node
Var tab = tabs. getComponent (id );
If (! Tab) {// if it does not exist
Tabs. add ({// create a tab with the node ID and text of the click tree
Id: id,
Closable: true,
Title: text,
IconCls: id,
Xtype: id // remove the TabPanel corresponding to the id set in the tree. It is equivalent to filling the corresponding view into the TabPanel.
}). Show ();
} Else {// If yes
Tabs. setActiveTab (tab); // Active
}
}
},

Result:

Summary: The effects of Extjs are really dazzling, but it is difficult to learn it. Especially for newer versions, it is difficult to find any good tutorials on the Internet. Fortunately, we have an API, so we can practice more examples in the API, so that we can quickly master it. Extjs has recently been used. I hope you will not be confused!