ExtJs add panel as tab item

Question

I have a setup where the tab is expected to be loaded based on user selection of an item from a left panel tree. My objective is to load only the relevant items as per the user selection to a particular tab.

The first time, I am able to add item as below:

    var tab = tabs1.getItem('Orders');   
    tab.remove(0);
    tab.add(pane33);
    tab.doLayout(); 

But, when the user selects the item again, the panel item is already removed, and errors out as (c.getPositionEl().dom is undefined).

The error is due to the item being removed or destroyed. There seems no option to replace the tab item, or to refresh/reload panels.

How to handle this?

Thanks.

Answer 1

you can mark that selection as 'selected' and check at mouse actions. as a simple approach.

Answer 2

Container.remove has an optional second argument autoDestroy, which means the component being removed is also destroyed permanently (for TabPanels, this defaults to true). You are only instantiating your child components one time, so after they get destroyed they are no longer available to be added. Either pass autoDestroy: false (this can be set at the TabPanel level as well) and hide existing components after removing them (then simply show them on subsequent clicks), or you'll have to reinstantiate them before adding each time.

Answer 3

bmoeskau: You saved my life! Thank you very much!