sencha touch how to change titles in tab bar

Question

I cannot change the tabbar titles in a tab Panel.

Edit: I'm working on a test app witch consists in a main tab panel with other three views, similar to the "getting started video" of the sencha-touch documentation.

Now, for localization purposes, I need to change dinamically the labels under the icons of the tab bar, representing the three links to the panels.

In the code below there is my attempt to change the label of the first button by changing the title of the related view, as the label display "Home", that is the title of the view. I want to do that on the "activate" event of the view. The result of this code is that if I log the title of the home view, it is changed but the tab bar button label remains the same.

I think that I miss something like "refreshing" the button, but I cannot find anything on this subject on the documentation. I hope this edit explains better my question.

Here is the code:

Ext.define('lvzMobile.view.Main', {
extend: 'Ext.tab.Panel',
requires: ['Ext.TitleBar'],
xtype: 'main',

config: {
    tabBarPosition: "bottom",

    items: [
        {
            xtype: 'homePanel',
            id: 'home',
        },
        {
            xtype: 'catalogue',
            id: 'catalogue'
        },
        {
            xtype: 'infoPanel',
            id: 'info'
        }
    ],

    listeners: {
        activate: function() {
            console.log("activate");
            this.getAt(0).setTitle("emoh");
            //the title changes but nothing happens in the tabbar... 
        }
    }
}
});

Please, can you help me? I can't understand what's wrong.

I expect that the label under the icon "Home" shows the text "emoh", please refer to this image: i46.tinypic.com/2i7pn7.jpg — Daniele P.

Attila O. Attila O. · Accepted Answer · 2013-01-11T10:25:51

The line that says:

this.getAt(0).setTitle('emoh')

…will change the title of your panel, but not the button itself. To change the button text, use:

this.getTabBar().getAt(0).setTitle('emoh')

Here's a fiddle with your code to demonstrate.

While there, here's a tip: use alias: 'widget.main' instead of xtype: 'main'. xtype is for configs, alias is for defining the alias which in turn can be used later with xtype (use prefix widget. to be used as a widget, store. to be used as a store, etc.).

sencha touch how to change titles in tab bar

1 Answers