如何将（现有）面板添加到 Tree ItemClick 上的区域中答案

【问题标题】：How to add a (existing) panel into a region on a Tree ItemClick如何将（现有）面板添加到 Tree ItemClick 上的区域中
【发布时间】：2013-06-03 11:38:52
【问题描述】：

我认为这很简单，但我不知道如何在视口区域的 Tree ItemClick 上加载现有面板！？

TreeController 被剪断

init: function() {
    this.control({
        'treemenu': {
            itemclick: function(view, node, record, item, index, e ) {
                if(node.isLeaf()) {

                } 
            },
            itemexpand: function (t,e){
                console.log(t.data.value);
            }
        }
    });

}

视口被剪断：

{
    region: 'center',
    layout: 'fit',
    items: [{
        xtype: ''
    }]

}

网格面板：

Ext.define('MyProject.view.FlyerGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.flyergrid',
    border:'0 0 0 0',
    title:'Flyer Übersicht',
    bbar: Ext.create('Ext.toolbar.Paging', {
        //store: store
        }),
    columns: [
        { text: 'Typ',  dataIndex: 'type',flex:1 },
        { text: 'year',  dataIndex: 'year' ,flex:1},

    ]

});

【问题讨论】：

只是一个提示：要获得更多响应，请始终至少使用 extjs 标记以及特定的版本标记。您使用的其他标签或多或少毫无价值
好的，谢谢提示！

标签： extjs extjs4 extjs4.1 extjs4.2

【解决方案1】：

首先定义一个引用来获取面板和视图

refs: [{
    ref: 'panel',
    selector: 'panel[region=center]' // you might give the panel a itemId instead of using region=center
}]

以及将添加视图的控制器方法

showPanel: function(view, node, record, item, index, e ) {
    if(node.isLeaf) {
        var grid= this.getFlyerGrid();
        if(!grid) {
            this.getPanel().add({xtype:'flyergrid'});
        }
    }
}

作为 ref 的替代方式，您还可以使用 Ext.ComponentQuery 假设您是否需要为每个记录 ID 设置一个网格并删除旧的

showPanel: function(view, node, record, item, index, e ) { 
    if(node.isLeaf) {
        var grid= Ext.ComponentQuery.query('flyergrid[itemId=record.data.id]');
        if(!grid) {
            var panel = this.getPanel();
            Ext.suspendLayouts();
            panel.removeAll();
            panel.add({xtype:'flyergrid',itemId:record.data.id});
            Ext.resumeLayouts(true);
        }
    }
}

更新您的控件

this.control({
        'treemenu': { itemclick: this.showPanel}
    }
});

请注意，所有这些代码都未经测试，应该只是向您展示技巧。

【讨论】：