Dynamically drawing a tab panel

[mediademon]

I'm trying to create a tab panel, but I only want certain tabs to be drawn depending on some configuration options we've set up.

E.g.
If Home_Tab = true then add home tab.
If Browse_Tab = true then add browse tab.

When setting them statically I would put them within items on a ext.tab.panel like this:

items: [
    {
        xtype: 'home'
    },
    {
        xtype: 'browse'
    },
    {
        xtype: 'more'
    }
]

But you can't put if statements within this, so I wondered if you can give it a function, say...

E.g. items: 'TabPanel'

Then, just to test it works I added a function like so:

TabPanel: function () {
        var panel = new Object();
        
        panel = [
            {
                xtype: 'home'
            },
            {
                xtype: 'browse'
            },
            {
                xtype: 'more'
            }
        ];
        return panel;
    }

This returned an error about being invalid config.

What is the best way to go about what I'm doing?

Also, how can you redraw a ext.panel which has already been created? Refresh the content so to speak.

Thank you

[mitchellsimoens]

Here is a dynamic and flexible way to do it:

Ext.define('MyTabpanel', {
    extend : 'Ext.tab.Panel',
    xtype  : 'mytabpanel',
    
    config : {
        home   : true,
        browse : true,
        more   : true
    },

    applyHome : function (home) {
        if (home) {
            home = {
                xtype : 'home'
            };
        }

        return home;
    },

    applyBrowse : function (browse) {
        if (browse) {
            browse = {
                xtype : 'browse'
            };
        }

        return browse;
    },

    applyMore : function (more) {
        if (more) {
            more = {
                xtype : 'more'
            };
        }

        return more;
    },

    updateHome : function (newHome, oldHome) {
        if (oldHome) {
            this.remove(oldHome);
        }

        if (newHome) {
            this.add(newHome);
        }
    },

    updateBrowse : function (newBrowse, oldBrowse) {
        if (oldBrowse) {
            this.remove(oldBrowse);
        }

        if (newBrowse) {
            this.add(newBrowse);
        }
    },

    updateMore : function (newMore, oldMore) {
        if (oldMore) {
            this.remove(oldMore);
        }

        if (newMore) {
            this.add(newMore);
        }
    }
});

Now you can configure it at startup to not show each separately:

new MyTabpanel({
    browse : false
});

That will show home and more but not browse. Or you can do it after:

var mytabpanel = Ext.ComponentQuery.query('mytabpanel')[0];

mytabpanel.setHome(false);

That will remove the home tab but leave the others alone.

Btw, this is the power of the config system and reason why we use it in ST2