ExtJS - FormPanel items clear & dynamic reload

Question

Basically I have a window containing a formPanel with items, that is shared at multiple places. Meaning that the formPanel's items might vary slightly. (the type of controls).

I've managed to dynamically clear and add custom buttons for the appropriate situation on the window.

But I'm experiencing a slight problem with the formPanel's items.

Digging into to source, I found that in the Ext.Container initComponent method there is this little piece of code:

var items = this.items;
if(items){
    delete this.items;
    if(Ext.isArray(items)){
        this.add.apply(this, items);
    }else{
        this.add(items);
    }
}

This seems to be similar to what I'm trying to achieve. Deleting all the current items and then calling the formPanel.add method would once again invoke this code:

if(!this.items){
    this.initItems();
}

This is all fine up to here. And the initial load of the form works perfectly. Although, when I hide the window, and open it again, the clear/reload of items works perfectly on my component, but the previous childNodes/items are still present in the dom.children and dom.innerHTML.

Thus my formPanel now displays two or more sets of controls that doesn't have any values, and the newly loaded controls at the bottom with the actual values.

I do invoke formPanel.doLayout() after the clearing/adding of items.

I've also tried calling the formPanel.remove method on every item currently on the formPanel, but I still end up with duplicates displaying, and the layout doesn't seem to dock/anchor properly, as I end up with a horizontal scroll bar underneath each item.

What else can I do to actually clear/reload the dom.children and dom.innerHTML ?

Any help would be greatly appreciated.

I'm using ExtJS 2.1 if it makes any difference.

Answer 1

If each child container has it's own updater, then you should be able to get the updater of the panel, trigger it, and have that trigger all it's children's updaters as well. This way you aren't removing/adding components repetitively, but rather 'refresh'ing them.

Out of Curiosity, what is it you're really trying to do? Are you just reloading the data held in the FormPanel's form fields?

Answer 2

Does it means that you do not want to destroy the formpanel purposefully. Does the window contains anything other than the form panel.

If the window contain the only the formpanel or contain formpanel as the biggest part then I think it is advisable to destroy the window when you close the window and let it recreate every time you want one.

In this case you can pass an parameter to the function which creates the window to say which type of controls you want(ready only/ writable).