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

【问题标题】：Ext JS Remove GUI Item From Its Container By xtypeExt JS 通过 xtype 从其容器中删除 GUI 项目
【发布时间】：2017-10-07 13:37:58
【问题描述】：

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

【问题讨论】：

您应该可以在您的 onSiRemoteCombo() 方法中执行 this.remove(this.down('propGrid'))。
看起来 onSiRemoteCombo 的范围是 siRemoteCombo 实例。 siRemoteCombo 扩展了什么？是组合框吗？

标签： javascript extjs extjs6.2

【解决方案1】：

查看component queries。它允许您根据属性搜索 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。只需从组合中选择一个值，网格就会被移除。

【讨论】：

@Alexandr 我已经更新了我的答案。看看小提琴。也许你没有正确设置xtype，或者别的什么..
是的，谢谢，您的代码运行良好。调查我的。还是有问题。
我无法解释。我将 xtype 的值从 propGrid 更改为 QpropGrid，它开始工作。我恢复了它，它也可以正常工作。一种魔法。我发现在我的测试页面上我定义了一个具有相同 xtype 的面板，它可能会影响它。但是这个测试页面没有加载。至少不应该。奇怪的行为。非常感谢您的快速支持！

【解决方案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();
}

【讨论】：