What is the correct method for dynamically setting titles for views in Sencha Touch 2 - dynamic

Question

I am currently setting view titles in a sencha touch 2 view like so:
initialize: function() {
this.callParent();
var translator = Ext.create('MyApp.util.Translation');
this.config.title = translator.translateData('pagetitle.detail');
}
The translation class just looks up a string from a javascript object based ont the key provided in the translator.translateData function.
With this approach when the view has loaded the title shifts slightly to right (40 px or so).
I have also tried placing this in a view listener activate with similar results.
What is the correct method for dynamically setting a view title in ST2?

Answer 1

You can do this way via the Controller
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
config: {
refs: {
titlebar: {
autoCreate: true,
selector: '#mytitlebar',
xtype: 'titlebar'
}
},
control: {
"titlebar#mytitlebar": {
initialize: 'onTitlebarInitialize'
}
}
},
onTitlebarInitialize: function(component, options) {
var me = this;
me.getTitlebar().setTitle("Second Title");
// OR IN YOUR CASE:
var translator = Ext.create('MyApp.util.Translation');
me.getTitlebar().setTitle(translator.translateData('pagetitle.detail'));
}
});
Views:
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.Container',
config: {
items: [
{
xtype: 'titlebar',
docked: 'top',
itemId: 'mytitlebar',
title: 'First Title'
}
]
}
});