Extjs中通過Tree加載右側TabPanel

最近在做一個物流管理的項目，公司必須要求用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要指定為你要打開的那個視圖的別名 50             }]
        }]
    }

});

要點介紹：

• tree一定不要忘記添加別名alias
• 設置樹形結構的子節點的id值為你需要在右側顯示的view的別名alias（重要）　------可參考下方的view代碼

2.需要打開的對應的view

Ext.define("AM.view.transportation.VehicleList",{
    extend:'Ext.grid.Panel',
    alias:'widget.vehiclelist', 　　//這里一定要設置別名  4     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中 18                         }).show();
                     }else{//如果存在  
                        tabs.setActiveTab(tab);//Active  
                     }  
                }
            },

結果上效果圖:

總結：Extjs做出來的效果確實很炫，但是學起來也有一定的難度，特別是比較新的版本，網上很難找到什么好的教程。還好我們有API，可以多對着API中的例子進行練習，這樣掌握起來也很快。最近才接觸Extjs，希望各位大神不要吐槽!