How to query current expanded item in accordion layout - extjs

Question

OK, so here is the way I can find current collapsed in accordion layout:
Ext.getCmp("myaccordion").query("{collapsed}")
How in the same manner I can find expanded one? I can't see expanded property. Moreover, this code:
Ext.getCmp("myaccordion").query("not:{collapsed}")
crushes my browser down.
UPD: here is my decision, based on example in ExtJS docs:
Ext.ComponentQuery.pseudos.expanded = function(items) {
var res = [];
for (var i = 0, l = items.length; i < l; i++) {
if (!items[i].collapsed) {
res.push(items[i]);
}
}
return res;
};
And then I just query this way Ext.getCmp("myaccordion").query(">*:expanded")
But can we make it shorter, using :not somehow?

Answer 1

You don't have to use a function for this component query.
If you have other panels somewhere in your framework that are not collapsed query('[collapsed=false]') would also include those so that was probably the problem you were having.
But you can limit the query to only direct children by calling child instead:
Ext.getCmp("myaccordion").child("[collapsed=false]");
Or you can limit it to direct children in the selector string itself if you give the accordion an id config, as it looks like you did: (id: 'myaccordion'). You can use:
Ext.ComponentQuery.query('#myaccordion > panel[collapsed=false]')
If you have the accordion configured for only one expanded panel at a time (the default config) that will give you an array with one item - the expanded panel. If you have more than one expanded panel they will each be contained in the array.

Answer 2

You could do:
Ext.onReady(function(){
var p1 = Ext.create('Ext.panel.Panel', {
renderTo: document.body,
width: 100,
height: 100,
title: 'Foo',
collapsed: true
});
var p2 = Ext.create('Ext.panel.Panel', {
renderTo: document.body,
width: 100,
height: 100,
title: 'Foo',
collapsed: false
});
console.log(Ext.ComponentQuery.query('[collapsed=false]'));
});