extjs - 如何将(现有)面板添加到 Tree ItemClick 上的区域中

Question

我认为这很简单，但我不知道如何在视口(viewport)区域的 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);
            }
        }
    });

}

视口(viewport)截断:

{
    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},

    ]

});

Answer 1

首先定义一个将获取面板和 View 的引用

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

和一个添加 View 的 Controller 方法

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}
    }
});

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