Component Query finds static config but not programmatically added - extjs

Question

In our ExtJs 5.0.1 project we create components and at runtime we add additional css classes conditional.
We want to find them by a component query but the component query returns nothing for the programatically added css classes.
But when we define them hardcoded in the component config then the query returns the expected result.
How can we get references to the components with programatically added css classes?
Example View:
Ext.define('T.view.Main',{
extend: 'Ext.panel.Panel',
title: 'test',
cls: 'working', // static config
initComponent: function(){
this.callParent(arguments);
this.addCls('notworking'); // added at runtime
}
});
Example Application:
Ext.application({
name : 'T',
autoCreateViewport: 'T.view.Main',
launch: function(){
// the cls "working" assigned as config to the Main View is found by
// the ComponentQuery
var working = Ext.ComponentQuery.query('[cls~=working]');
// the cls "notWorking" assigned by addCls during runtime to the Main View
// is not found by the ComponentQuery
var notWorking = Ext.ComponentQuery.query('[cls~=notworking]');
Ext.Msg.alert('Static vs Dynamic', 'working: ' + working.length + ' notWorking: ' + notWorking.length);
}
});
Update
#Alexander suggested to add the additional cls before the callParent call , which sounds like an obvious solution but now even the .working cls is not found by the component query.
Ext.define('T.view.Main',{
extend: 'Ext.panel.Panel',
title: 'test',
cls: 'working', // static config
initComponent: function(){
this.cls += ' notworking';
this.callParent(arguments);
}
});
See the updated Sencha Fiddle.
Update 2
I may found the problem in the Component.js code, in the constructor the following happens
constructor: function (config) {
...
me.setupProtoEl();
// initComponent, beforeRender, or event handlers may have set the style or `cls` property since the `protoEl` was set up
// so we must apply styles and classes here too.
if (me.cls) {
me.initialCls = me.cls;
me.protoEl.addCls(me.cls);
}
if (me.style) {
me.initialStyle = me.style;
me.protoEl.setStyle(me.style);
}
me.renderData = me.renderData || {};
me.initComponent();
...
the proto el is initialized with some css classes by me.setupProtoEl();
it is checked if cls is set and it is then applied to the proto element and saved to initialCls property
initComponent function is called, when cls is changed in it, it is not noticed by the constructor anymore
In my opinion the steps 2 and 3 needs to be swapped in order to recognize changes of cls in the initComponent function.

Answer 1

cls is a configuration attribute for you to specify the CSS class. But addCls doesn't update it - it simply updates the class attribute on the underlying DOM element.
addCls: function(cls) {
var me = this,
el = me.rendered ? me.el : me.protoEl;
el.addCls.apply(el, arguments);
return me;
},
(source)
Because addCls doesn't update the cls attribute, your ComponentQuery call can't find it that way.
As to how you solve your problem: the simplest way would be to add a property of your own on the class that you update at the same time as you add the class. Then you can do a component query on your custom property. Though I'd include the xtype of your class, so as to avoid potential namespace conflicts.

Answer 2

As #RobertWatkins points out the cls of the component is not changed by addCls, it just updates the DOM element.
A solution to set the cls config during runtime, is to do it in the components constructor. The cls is then applied to the DOM element and to the component aswell. The component query is now able to find it.
cls: 'working',
constructor: function (config) {
this.cls += ' nowworking';
this.callParent(arguments);
},
The corresponding application snippet
// the component is retrieved
var working = Ext.ComponentQuery.query('[cls~=working]');
// the component is retrieved aswell
var nowWorking = Ext.ComponentQuery.query('[cls~=nowworking]');
A working fiddle.