PDA

View Full Version : Problem with initCompent on Toolbar



jcoenrae
4 Sep 2011, 1:46 AM
Hi,

I want to call initComponent on a toolbar with one button and a title. In the initComponent method I want to change the title. But if I add the initComponent method, the title is set correctly but the button is gone. If I add a blank initComponent method, the button is still gone. Without the initComponent method, everything works fine.

Any idea what is causing initComponent to act that strange?

Here is my code:


app.views.Menu = Ext.extend(Ext.Panel,{ id: 'menu',
dockedItems: [{
xtype: 'toolbar',
title: 'temp',
items: [{
xtype: 'spacer'
},{
ui: 'forward',
handler: function() {
Ext.dispatch({
controller: app.controllers.menuController,
action: 'map'
});
},
initComponent: function() {
this.text = app.i18n.getString("map");
}
}],
initComponent: function() {
this.title = app.i18n.getString("programname");
}
}],
layout: 'fit',
items: [movemeapp.views.menuList]
});

Thanks!

mitchellsimoens
4 Sep 2011, 6:50 AM
You need to specify your dockedItems and items inside the initComponent.

Why do you have an initComponent inside your button? You aren't calling the superclass of that button and it's not needed anyway.


app.views.Menu = Ext.extend(Ext.Panel, {
id: 'menu', //TODO use id only for development, don't rely on it in production
layout: 'fit',

initComponent: function() {
var me = this;

Ext.apply(me, {
dockedItems : me.buildDocks(),
items : me.buildItems(),
title : app.i18n.getString('programname')
});

app.views.Menu.superclass.initComponent.call(me);
},

buildDocks: function() {
return [
{
xtype: 'toolbar',
title: 'temp',
items: [
{
xtype: 'spacer'
},
{
text : app.i18n.getString("map")
ui: 'forward',
handler: function() {
Ext.dispatch({
controller: app.controllers.menuController,
action: 'map'
});
}
}
]
}
];
},

buildItems: function() {
return movemeapp.views.menuList;
}
});

jcoenrae
4 Sep 2011, 10:32 AM
Hi,

I only use the id for development and testing the dom (it makes it much more readable). As you suggest, I don't use it in production.

I understand your code and I will test it. I suppose this will work.

The reason I am using the initComponent (in menu and button) is because I want to internationalize my program and for that I am relying on an I18n class we wrote for Phonegap. The problem is that this i18n class has to be loaded first. I am creating the viewport after it is loaded, but it seems like the panels are created before because it can't seem to find the object (it is undefined). When I put the code in initComponent it is able to use the class so this is why I put these things in the initComponent.

Thanks for your reply!

jcoenrae
4 Sep 2011, 10:36 AM
Hi,

I tested your response and I have again the problem that he is not finding the app.i18n object in the text for the button. If I comment that line everything works.

Do you know another solution to solve this problem? Otherwise I will just add initComponents everywhere.