Extjs树形控件加载右侧TabPanel实现方法

最近在开发一套物流管理系统的前端界面，技术选型要求必须基于 ExtJS 4.1。说实话，这个版本虽然成熟稳定，但网上能找到的实战教程相对较少，尤其是一些界面联动的细节，往往需要反复查阅 API 并不断试错才能跑通。下面就把左侧功能树与右侧 TabPanel 联动的完整思路和核心代码拆解出来，希望能对遇到类似需求的朋友有所帮助。

1. 左侧的功能树

首先定义一个树形结构，作为左侧导航菜单。这里采用 Ext.tree.Panel，关键配置如下：

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 必须指定为待打开视图的别名
            }]
        }]
    }
});

要点：

• 树组件一定要设置 alias，便于后续引用。
• 子节点的 id 必须等于右侧对应视图的 alias 值——这是联动机制的核心。后面会看到，点击树节点时正是通过这个 id 来精准定位具体视图。

2. 需要打开的对应视图

以“车辆信息管理”为例，定义一个 GridPanel，注意别名和 id 必须保持一致：

Ext.define("AM.view.transportation.VehicleList",{
    extend:'Ext.grid.Panel',
    alias:'widget.vehiclelist',  // 别名必须与树节点 id 一致
    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

主界面右侧放置一个 TabPanel，用于承载各个功能页面。初始化时先放一个默认的首页：

Ext.define('AM.view.TabPanel',{ 
    extend: 'Ext.tab.Panel', 
    alias:'widget.tabpanel', 
    closeAction: 'destroy', 
    defaults :{
        bodyPadding: 10
    },
    items: [{
        title: '主页', 
        autoLoad:'content.jsp'     // 简单的 panel 加载页面
    }]
});

4. 设置点击 tree 的触发事件

最后是关键一步：监听树节点的点击事件，根据节点 id 在 TabPanel 中动态添加或激活对应的视图。注意通过层层定位找到右侧的 tabpanel 组件：

'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;
        // 获取与树节点 id 相同的 tab 标签
        var tab = tabs.getComponent(id);
        if(!tab){ // 如果不存在则新建
            tabs.add({
                id:id,
                closable: true,
                title:text,
                iconCls:id,
                xtype:id   // 将 id 作为 xtype，渲染对应的视图
            }).show();
        }else{ // 如果已存在则激活
            tabs.setActiveTab(tab);
        }
    }
},

效果图如下（来自实际项目截图）：

总结

ExtJS 构建的界面视觉效果非常出色，但新版本的学习曲线相对陡峭，尤其网上能找到的完整实战案例不多。遇到问题时最有效的方法还是仔细阅读 API 文档，并对照官方示例逐步调试。上面这套左侧树 + 右侧 TabPanel 联动的设计模式，在后台管理系统中极为常用，代码量不大，只要把 id 和 alias 的映射关系理清楚，基本就能顺利实现。刚接触 ExtJS 不久，如有不当之处欢迎指正交流。