Problem with destroying component

[youss.imzourh]

Hi all,

I have a vicious problem with some Panel (with vbox/stretch layout), that I create a first time with some config, and I add it to a Container.
This Panel have 3 items (2 FormPanel and 1 GridPanel).

1. I destroy the Panel (or remove it from container with autoDestroy true)
2. I add a new Panel with the same config as the first time.

=> I have a javascript error (trace below), and all my layout is broken.

First, I thought it was the static IDs that I gave to some components which causes the bug, but even if I remove all these IDs, I have exactly the same problem.

I think it's caused by the destroy that is not a real complete destroy. When I list the elements of the Ext.ComponentManager (Ext.ComponentManager.all) just after my destroy call, I still have the Panel and all its descendants.

Can you please guide me to solve this annoying bug ?

Thanks in advance.
Youss

Uncaught TypeError: Cannot read property 'addCls' of null
Ext.define.addCls                                             ext-all-debug.js:44732
Ext.define.configureItem                                      ext-all-debug.js:72814
Ext.define.renderItem                                         ext-all-debug.js:41198
Ext.define.renderItems                                        ext-all-debug.js:41162
Ext.define.renderChildren                                     ext-all-debug.js:41147
Ext.define.invalidate                                         ext-all-debug.js:54175
Ext.define.invalidate                                         ext-all-debug.js:54181
Ext.define.invalidate                                         ext-all-debug.js:54181
Ext.define.flushInvalidates                                   ext-all-debug.js:54016
Ext.define.run                                                ext-all-debug.js:54501
Ext.define.statics.flushLayouts                               ext-all-debug.js:43381
Ext.define.statics.resumeLayouts                              ext-all-debug.js:43388
Ext.resumeLayouts                                             ext-all-debug.js:45386
Ext.define.add                                                ext-all-debug.js:73455
Ext.define.action                                             app/Ayaline/Page.js:37
Ext.define.authentification.Ext.Ajax.request.success          app/Ayaline/Utils.js:17
Ext.apply.callback                                            ext-all-debug.js:6293
Ext.define.onComplete                                         ext-all-debug.js:36779
Ext.define.onStateChange                                      ext-all-debug.js:36740
(anonymous function)ext-all-debug.js:1765 

[scottmartin]

It would be very helpful if you could create a small working example so we can take a look.

Regards,
Scott.

[evant]

It usually means you're trying to re-use an already destroyed component.

[youss.imzourh]

Sorry I found my mistake :

I'm using my own components that inherits from Panel or FormPanel, etc.
I didn't define them properly :

Ext.define('Ayaline.page.Exportation', {
    extend: 'Ext.Container',

    pageTitle: 'Exportation de fiches',

    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    defaults: {
        anchor: '100%'
    },
    items: [
        Ext.create('Ayaline.panel.RecherchesRapides'),
        Ext.create('Ayaline.panel.FormulaireRecherche'),
        Ext.create('Ayaline.panel.ListeDeResultats')
    ]
}); 

The right way that fixed my bug :

Ext.define('Ayaline.page.Exportation', {
    extend: 'Ext.Container',

    pageTitle: 'Exportation de fiches',

    initComponent: function () {
        Ext.apply(this, {
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            defaults: {
                anchor: '100%'
            },
            items: [
                Ext.create('Ayaline.panel.RecherchesRapides'),
                Ext.create('Ayaline.panel.FormulaireRecherche'),
                Ext.create('Ayaline.panel.ListeDeResultats')
            ]
        });
        this.callParent(arguments);
    }
}); 

[ahgoodale]

Was moving the "layout" and "defaults" config objects into initComponent() required to solve the issue? It seems like all you need to do is move the items collection, since it was the child items on the prototype that were being re-used when the component was destroyed.

[youss.imzourh]

Was moving the "layout" and "defaults" config objects into initComponent() required to solve the issue? It seems like all you need to do is move the items collection, since it was the child items on the prototype that were being re-used when the component was destroyed.

Right!
Thanks ahgoodale

[Juanito]

I ran across the same problem when some code was recreating a window with the same ID as what it was previously.

buttons: [{
    text: 'Select File',
    handler:  function() {
        new Ext.Window({
            title: 'Browse and Select Sequence File',          
            id: 'fileUploaderWindow',   // Breaks everything
            width: 600,
            layout: 'fit',
            items: fileUploader,
            autoShow: true
        });
     },
}] 

I have always said, don't ever assign your own ids, now I have one more reason for it.