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

Source: Internet
Author: User

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


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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.