PDA

View Full Version : Ext.ComponentQuery.query on newly added components



bigby
17 May 2012, 7:17 AM
I've been banging my head over this one. I am using Sencha Touch 2.0 MVC. Here is a simplified version of my controller:


Ext.define('TestApp.controller.Application', {
extend : 'Ext.app.Controller',
config : {
refs : {
floorpanel : 'floorpanel',
floorbutton : 'floorbutton'
},
control : {
floorpanel : {
initialize : 'onFloorPanelInit'
}
}
},
onFloorPanelInit: function(self) {
Ext.getStore('Floors').load(function(floors){
var items = [];
Ext.each(floors, function(floor){
items.push({ xtype: 'floorbutton', floor: floor, cls: 'btnFloor'});
});
self.setItems(items);
});
this.updateLocale();
},
updateLocale : function() {
var components = Ext.ComponentQuery.query('floorbutton');
Ext.Array.each(components, function(component){
component.setLocale(this.locale);
});
}
});

Floor Panel View:


Ext.define('TestApp.view.FloorPanel', {
extend: 'Ext.Panel',
xtype: 'floorpanel',
requires: [
'TestApp.view.FloorButton'
],
config: {
cls: 'toc'
}
});

Floor Panel Button:


Ext.define('TestApp.view.FloorButton', {
extend: 'Ext.Button',
xtype: 'floorbutton',
setLocale : function(locale) {
var name = this.floor.get('name');
this.setText((locale == 'en') ? name.fr : name.en);
}
});


The problem is in the updateLocale function I try and 'Ext.ComponentQuery.query' all existing 'floorbutton' and get nothing even though it is called AFTER they are created. What is even stranger, is if I perform an additional action (i.e click) the Ext.ComponentQuery.query finds the floor buttons.

In my mind, I have created the floor buttons and added them to the floor panel so they should exist. Any help would be appreciated.

bigby
17 May 2012, 10:15 AM
Update:

So I figured out what my issue was, and I didn't want to pull this : http://xkcd.com/979/

(http://xkcd.com/979/)In my controller I had many 'controls' for different views with an 'initialize' method assume this would be fine, boy was I wrong. I moved all my initialize methods to their respective view and included 'this.callParent(arguments);' as the first line in the method, now everything works.

Naturally the documentation says nothing about this, or why it doesn't work. It just doesn't.