Ext js - Dynamically changing content of Tab in a TabPanel

Question

I have an (Ext JS) tab panel where the hidden tabs aren't loaded at all upon initial instantiation, (the only thing I set is the title).

Upon 'activation' of a tab I want to call a method , which then instanstiates a new FormPanel/GridPanel and put this content into the tab.

Can someone point me to a code example or give me tips on how to do this?? Thanks so much!

score 5 · Accepted Answer · answered Dec 09 '09 at 20:09

5

Just build a new panel and add it to the activated tab. Then call doLayout().

listeners: {
    activate: function(panel) {
        var formPanel = ....
        panel.add(formPanel);
        panel.doLayout();
    }
}

answered Dec 09 '09 at 20:09

2

Note that you probably would not want to re-add the form panel every time the tab is activated. You'd probably want to either use the {single:true} config when adding the activate listener, remove the listener manually after adding the form panel, or check in the activate handler whether or not the form panel is already loaded first. – Brian Moeskau Dec 10 '09 at 07:37
thanks very much! that did the trick. and yes i will definitely put logic in there so it doesn't re-add... – 29er Dec 10 '09 at 18:06

1 Answers1