CODEWITHSUNDEEP
javascriptextjsextjs6.2
Alexandr
Alexandr

Reputation: 9505

Ext JS Remove GUI Item From Its Container By xtype

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.

Upvotes: 2

Views: 1606

Answers (2)

scebotari66
scebotari66

Reputation: 3480

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.

Upvotes: 3

Tom Aranda
Tom Aranda

Reputation: 6026

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

Upvotes: 1

Related Questions