首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Ajax >

求教 extjs4 点击树节点 新建tab并加载不同的grid解决思路

2013-01-05 
求教extjs4 点击树节点 新建tab并加载不同的grid本帖最后由 blanksoil 于 2012-07-24 17:35:44 编辑//点击

求教 extjs4 点击树节点 新建tab并加载不同的grid
本帖最后由 blanksoil 于 2012-07-24 17:35:44 编辑

//点击树节点,中间的tabpanel新建一个对应的tab
west_chem.on('itemclick',function(view,record,item,index,e){
        var cen_tabs = Ext.getCmp("cen_tabPanel");
        if(record.raw.leaf){
            e.stopEvent();  
            var addnew = cen_tabs.getComponent(record.raw.id);
            var id = record.raw.id;
            if(!addnew){
                addnew  =  cen_tabs.add({
                    itemId : record.raw.id,
                    title: record.raw.text,
                    autoScroll:true,
                    closable:true,
                    closeAction:'close',
                    items:[inorg_all_grid],     //每个panel加载的grid不同,要怎么做?
                    dockedItems: [{
        dock: 'top',
        xtype: 'toolbar',
        items: [ '->',  {
           xtype: 'textfield',
           fieldLabel:'查询条件',
           name: 'searchBy'
        }, {
           xtype: 'button',
           text: '搜索'
        },{
           xtype: 'button',
           text: '增加',
           }
        }]
    }]
                 }).show();
            }
        
            cen_tabs.setActiveTab(addnew);  
         }
         
  });


[解决办法]
将itemclick处理封装到一个方法中:如:
var cen_tabs = Ext.getCmp("cen_tabPanel");



west_chem.on('itemclick': function (view, record, item, index, e) {
    //alert(record.raw.text);
    if (record.data.leaf) {
       e.stopEvent();
       treeNodeClick(record);//处理点击树节点的一个方法,这里暂不关注。
    }
    else {
       var exp = record.isExpanded();
       if (exp) {
           record.collapse();
       }
       else {
           record.expand();
       }
    }
});
另外将添加一个grid到tab中的方法:

tabPanelAdd = function (treeitem, panelitem) {//添加一个Tab页(panelitem是新添加Tab页中的
                                                       //控件对象,例如grid panel等)    
    var tbaPage = centertab.getComponent(treeitem.data.id);//通过id取得Tab页对象
    if (!tbaPage) {
        var curr = cen_tabs.add({
            itemId: treeitem.data.id,
            iconCls: treeitem.data.iconCls,            
            title: treeitem.data.text + ' ',            
            closable: true,
            layout: "fit",
            items: [panelitem]
        }).show();
        centertab.setActiveTab(curr);        
    } else {
        tbaPage.tab.show();
        centertab.setActiveTab(tbaPage);
    }
}

tabPanelAdd()方法则在treeNodeClick(record);处使用,
[解决办法]
如果grid是已知的话给每个grid一个不同的命名然后在你cen_tabs.add()的items里直接放不同的grid不就行了

如果grid也要动态生成就直接在cen_tabs.add()的items里加入new ext.grid.gridpanel(...)

热点排行