Results 1 to 2 of 2

Thread: Dynamically drawing a tab panel

  1. #1
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    25

    Default Dynamically drawing a tab panel

    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:
    Code:
    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:
    Code:
    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

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448
    Answers
    3997

    Default

    Here is a dynamic and flexible way to do it:

    Code:
    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:

    Code:
    new MyTabpanel({
        browse : false
    });
    That will show home and more but not browse. Or you can do it after:

    Code:
    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
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •