Destroying and creating new panels

[stevanicus]

Hi there,

What is the best method of destroying and creating panels?

I have a "wrapper" panel which dynamically loads its items via an array

var myItems = [];
myItems.push(Ext.create("App.view.Grid1"));
myItems.push(Ext.create("App.view.Grid2"));

var Mypanel = Ext.create("App.view.Mypanel", {
    dynamicItems:myItems
});

mywrapperpanel.insert(0, Mypanel);

Mypanel extends Ext.panel.Panel

and has an initComponent similar to

initComponent:function(){

    if(this.dynamicItems){
        this.items[0] = this.dynamicItems[0];
        this.items[1] = this.dynamicItems[1];
     }
}

This all works absolutely fine (the first time) until I want to add new items to my panel by

mywrapperpanel.removeAll()

---> get new "myItems"

var Mypanel = Ext.create("App.view.Mypanel", {
    dynamicItems:myItems
});

mywrapperpanel.insert(0, Mypanel);

The error I then get is:

Error: el is nullext-all-dev.js (line 11108)


TypeError: me.el is null
[IMG]chrome://firebug/content/blank.gif[/IMG]
me.container = Ext.get(me.el.dom.parentNode);ext-all-dev.js (line 38342)

"me" is the first (non specific) item in the array "myItems". me doesnt not have el or a container hence the failure.


Thanks in advance

[stevanicus]

Found the answer,

in the initComponent function the items need to be added after this.callParent() is called

initComponent:function(){
        this.callParent();
        if(this.dynamicItems){
            this.items.add(this.dynamicItems[0]);
            this.items.add(this.dynamicItems[1]);
        }
    }

Then you don't have the problem with me.el is null

[scottmartin]

Thank you for the follow up.

Scott.