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

Posted 2023-02-26

【中文标题】如何将（现有）面板添加到 Tree ItemClick 上的区域中

【英文标题】：How to add a (existing) panel into a region on a 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 标记以及特定的版本标记。您使用的其他标签或多或少毫无价值

好的，谢谢提示！

【参考方案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
    
);

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