Cannot remove components (Attempted to remove a component that does not exist)

Question

I have a component with a number of sub components. In the following code, I get the component, and then get all its child components with 'cls=ngp'. Then I iterate over them and try to remove them from the parent panel.

    var ptp = Ext.ComponentQuery.query('partytoolpanel')[0]; //there is only ever one instance!!

    var comps = Ext.ComponentQuery.query('partytoolpanel [cls=ngp]') //6 objects are returned here!!

    comps.forEach(function (c) {
        ptp.remove(c);
    })

The comps are not removed, instead I get this message :

Attempted to remove a component that does not exist. Ext.container.Container: remove takes an argument of the component to remove. cmp.remove() is incorrect usage.

I tried to duplicate this problem in a fiddle, and, of course, it works perfectly :( https://fiddle.sencha.com/#fiddle/1irm

Why would my case not work?

Answer 1

The component query partytoolpanel [cls=ngp] will match all components with that class which are somewhere in the hierarchy below the component with xtype: 'partytool', not just direct children.

But the container.remove function can only remove components that are direct children of container.

You should remove the components from their direct parent inside your loop:

Ext.each(comps, function (c) {
    c.up().remove(c);
})

(I recommend that you use Ext.each(array, fn) instead of array.forEach(fn), so Sencha can take care of any browser issues.)