Question

面板包含3个项目。最后一项有一个事件处理程序attache。在处理程序中，新项（窗口小部件）将添加到父面板。在添加新项目之前，应删除相同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组件。

为了便于访问基于特定Container的查询，请参阅 Ext.container.Container#query，Ext.container.Container#down和 Ext.container.Container#child方法。另请参阅Ext.Component#up。

对于您的案例down或child是合适的。像这样：

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

这是一个工作小提琴：https://fiddle.sencha.com/#view/editor&fiddle/27vh。只需从组合中选择一个值，网格就会被移除。

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项

2 个答案: