我的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中了。