1

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
    }
});
M Azam
  • 518
  • 1
  • 7
  • 28

1 Answers1

0

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

Josh
  • 8,082
  • 5
  • 43
  • 41
  • What if I want to work at a more granular level, instead of `setItems` I just want to change the title of the items themselves like so `item.config.title = "Something New"`. How would I do this? – M Azam Jan 17 '13 at 19:22
  • You can call [`getItems()`](http://docs.sencha.com/touch/2-0/#!/api/Ext.tab.Panel-method-getItems), iterate through each item in the items array, and modify the appropriate items, then call `setItems(items)` with the modified items. – Josh Jan 17 '13 at 19:52
  • Doing this causes the entire interface to go blank with the tabbar items shown but there are no tab bar items after the `setItems(items)` call - this call is made from a controller. So, I can say that this is probably not the correct method of updating the tabbar items. – M Azam Jan 18 '13 at 16:19
  • More likely there is an error with the way you're handling it. Whether the call is made from a listener in the view or a method in the controller shouldn't matter as long as you're properly calling them. Make sure your `items` holds what you think it holds. If you provide more relevant code to your localized problem, then the solution can be more catered to the needs of the problem. – Josh Jan 18 '13 at 16:34