2

一个面板包含 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 组件。

4

2 回答 2

3

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

要轻松访问基于特定容器的查询，请参阅 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 。只需从组合中选择一个值，网格就会被删除。

于 2017-10-07T13:57:03.413 回答
1

要删除具有prodGridxtype 的项目，请尝试以下操作：

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();
}
于 2017-10-07T14:08:17.470 回答