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

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) {
var items = [];
Ext.each(floors, function(floor){
items.push({ xtype: 'floorbutton', floor: floor, cls: 'btnFloor'});
updateLocale : function() {
var components = Ext.ComponentQuery.query('floorbutton');
Ext.Array.each(components, function(component){

Floor Panel View:

Ext.define('TestApp.view.FloorPanel', {
extend: 'Ext.Panel',
xtype: 'floorpanel',
requires: [
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.

17 May 2012, 10:15 AM

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.