Ext JS Remove GUI Item From Its Container By xtype

2
votes

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.

2
javascriptextjsextjs6.2
You should just be able to do this.remove(this.down('propGrid')) in your onSiRemoteCombo() method. – Tom Aranda
It looks like the scope of onSiRemoteCombo would be the siRemoteCombo instance. What does siRemoteCombo extend? Is it a combo box? – Trevor Karjanis

2 Answers

3
votes

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.

1
votes

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