TAGS :Viewed: 9 - Published at: a few seconds ago

[ How to query current expanded item in accordion layout ]

OK, so here is the way I can find current collapsed in accordion layout:

Ext.getCmp("myaccordion").query("{collapsed}")

<p>How in the same manner I can find expanded one? I can't see expanded property. Moreover, this code:</p>

Ext.getCmp("myaccordion").query("not:{collapsed}")

<p>crushes my browser down.</p>

<p><strong>UPD:</strong> here is my decision, based on <a href="http://docs.sencha.com/ext-js/4-0/#!/api/Ext.ComponentQuery" rel="nofollow">example</a> in ExtJS docs:</p>

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]'));

});