How to refresh tab panel items in Sencha Touch 2

Question

I am using a tab panel (Ext.tab.Panel) that has 4 tabs and on one of the child screens when the user make a selection from a radio button group, I would like the tab panel to refresh itself (i.e. load new text, new icons). How can I force the tab Panel (which is the core navigational element of the app) to refresh?

I have tried setting the show: function() { } method on the view as follows:

Ext.define('MyApp.view.Main', { 
    extend: 'Ext.tab.Panel',
...
    show: function() {
        this.callParent();
        ... reload stuff
    }
});

Josh Josh · Accepted Answer · 2013-01-17T17:10:30

The tabs/icons in a Ext.tab.Panel make up the items property of the component. To change these tabs/icons you must change the items.

Use setItems(items) to effectively change the tabs/icons of the Ext.tab.Panel inside your listener.

var tabpanel = Ext.getCmp('tabpanelid'); // Get appropriate panel using its id

// Removes the current tabs, and inserts the following 2 tabs
tabpanel.setItems([
    {
        title: 'Tab1',
        iconCls: 'info',
        html: 'Foo'
    },
    {
        title: 'Tab2',
        iconCls: 'reply',
        html: 'Bar'
    }
);

Check out a working example here.

UPDATE: To modify one of the current items, use getItems(), modify the appropriate items, and call setItems(items).

Updated Example

How to refresh tab panel items in Sencha Touch 2

1 Answers