我的ExtJS学习之路 ——4

项目基本架子出来，然后就该考虑将封装好的gridpanel 和 tabpanel关联起来

既 点击树的叶子节点，将 gridpanel 展现在 tabpanel中

怎么关联呢？

【在之前的基础上的，重复的代码就不贴出来了】

我改变了 模拟数据的形式，注意id的变化，和上期的不一样

[
    {id:'Ext.cjl.TestGrid_testgrid',text:'菜单-1',leaf:true}
]

id用下划线隔开，前面是封装好的表格，后面是 表格在项目中唯一的id编号

然后在 index.js，添加树节点的点击事件

var menus= new Ext.tree.TreePanel({
        id:'menus',
        loader: new Ext.tree.TreeLoader({
            dataUrl: 'temp/tree.txt'
            }),
        title:'菜单',
        rootVisible:false,
        region:'west',
        split:true,
        border:true,
        collapsible:true,
        listeners : {
            'click': function(node, event) {
                clickNode(node,event);
            }
        }
    });

项目使用的统一的点击节点的方法，clickNode，在index.html中的定义

function clickNode(node,event){
    event.stopEvent();
var tempId=node.id.split('_');
var entityClass=tempId[0];
var entityId=tempId[1];
//叶子节点
    if(node.leaf==true){
var tabs=Ext.getCmp('centertabpanel');
var n = tabs.getItem(entityId);
var tempGrid=null;
var object = 'new ' + entityClass+'();';
if(!n){
            n = tabs.add(eval(object));
            tabs.activate(n);
        }
        tabs.setActiveTab(n);
    }
//枝
    else{
        node.toggle();
    }
}

获取节点对应的class 和 id，如果tabpanel中有，获取焦点，显示出来；不存在，new新的，获取焦点

然后之前的封装好的，表格gridpanel，就可以添加发的 tabpanel中了。