Ext JS 通过 xtype 从其容器中删除 GUI 项

Question

一个面板包含 3 个项目。最后一项有一个事件处理程序附件。在处理程序中，一个新项目（小部件）被添加到父面板。在添加新项目之前，应删除相同 xtype 的旧项目。

这是一个不起作用的例子：

Ext.define('Retroplanner.view.dimension.DimensionMapping', {
    extend: 'Ext.form.Panel',

    defaultListenerScope: true,

    items: [{
            xtype: 'component',
            html: '<h3> Dimension Mappings</h3>',
        },{
            xtype: 'bm-separator'
        },{
            xtype: 'siRemoteCombo',
            ...
            listeners: {
                'select': 'onSiRemoteCombo'
            }
        }
    ],

    onSiRemoteCombo: function(cmb, rec, idx) {    
        var item;
        for(item in this.items){
            //here item - is undefined, 
            //although this.items.length=3, as expected
            //alert(item.xtype); 
            //isXType is not defined for undefined element:
            if (item.isXType('propGrid')) { 
                this.remove(item);
                break;
            }
        }
        //the following code works as expected, if the previous is commented
        var dimensionMapping = Ext.widget('propGrid');
        this.items.add(dimensionMapping);
        this.updateLayout();
    }
});

我尝试使用索引，但它也不起作用：

Ext.define('Retroplanner.view.dimension.DimensionMapping', {
...
    defaultListenerScope: true,

    items: [{
            xtype: 'component',
            ...
        },{
            xtype: 'bm-separator'
        },{
            xtype: 'siRemoteCombo',
            ...
            listeners: {
                'select': 'onSiRemoteCombo'
            }
        }
    ],

    onSiRemoteCombo: function(cmb, rec, idx) {
        //the following code does not remove item in GUI interface. 
        if (this.items.length == 4)
            this.remove(this.items[3], true);

        var dimensionMapping = Ext.widget('propGrid');
        this.items.add(dimensionMapping);
        this.updateLayout();
    }
});

我希望能够通过 xtype 删除项目，而无需任何 id 或其他类型的引用。但如果不可能，最好的方法是什么？从容器中删除 GUI 组件。

Answer 1

查看 component queries。它允许您根据 ExtJS 组件的属性在全局或从容器内搜索它们。

For easy access to queries based from a particular Container see the Ext.container.Container#query, Ext.container.Container#down and Ext.container.Container#child methods. Also see Ext.Component#up.

对于您的情况，down 或 child 是合适的。像这样：

this.remove(this.down('propGrid'))

这是工作 fiddle：https://fiddle.sencha.com/#view/editor&fiddle/27vh。只需 select 组合中的一个值，网格就会被删除。

Answer 2

要删除具有 prodGrid xtype 的项目，试试这个：

onSiRemoteCombo: function(cmb, rec, idx) {
    if (this.down('prodGrid'))
        this.remove(this.down('prodGrid'))

    var dimensionMapping = Ext.widget('propGrid');
    this.items.add(dimensionMapping);
    this.updateLayout();
}

Ext JS 通过 xtype 从其容器中删除 GUI 项

Ext JS Remove GUI Item From Its Container By xtype

javascript

extjs

extjs6.2