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:


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


<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:


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:


    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