Ext JS Remove GUI Item From Its Container By xtype

Question

A panel contains of 3 items. The last item has an event handler attache. In the handler a new item (widget) is added to the parent panel. Before adding a new item, an old item of the same xtype should be deleted.

Here is an example that does not work:

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();
    }
});

I tried to use index, but it also does not work:

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();
    }
});

I would like to be able to remove item by xtype, without any id or other types of references. But if it is not possible, which is the best way to do it? To remove GUI component from its container.

You should just be able to do `this.remove(this.down('propGrid'))` in your `onSiRemoteCombo()` method. — Tom Aranda, Oct 07 '17 at 14:06
It looks like the scope of onSiRemoteCombo would be the siRemoteCombo instance. What does siRemoteCombo extend? Is it a combo box? — Trevor Karjanis, Oct 07 '17 at 18:14

scebotari66 · Accepted Answer · 2017-10-07T14:40:39.423

3

Check out component queries. It allows you to search for ExtJS components based on their attributes, globally or from within a container.

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.

For your case down or child are appropriate. Something like this:

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

Here is a working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/27vh. Just select a value from the combo, and the grid will be removed.

edited Oct 07 '17 at 14:40

answered Oct 07 '17 at 13:57

scebotari66

3,395
2
27
34

@Alexandr I've updated my answer. Check out the fiddle. Maybe you are not setting the `xtype` properly, or something else.. – scebotari66 Oct 07 '17 at 14:41
yes, thank you, your code works fine. Investigating my one. Something is still wrong. – Alexandr Oct 07 '17 at 15:06
I cannot explain it. I changed a value of xtype from propGrid to QpropGrid, and it started to work. I reverted it back, and it also works fine. A kind of magic. I've found that on my test page I defined a panel with the same xtype and it could affect it. But this test page is not loaded. At least should not. Strange behaviour. Thank you very much for your quick support! – Alexandr Oct 08 '17 at 11:56

score 1 · Answer 2 · answered Oct 07 '17 at 14:08

To remove an item with the prodGrid xtype, try this:

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 Remove GUI Item From Its Container By xtype

2 Answers2