CODEWITHSUNDEEP
extjsextjs4accordion
shabunc
shabunc

Reputation: 24741

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}")

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?

Upvotes: 3

Views: 3785

Answers (2)

egerardus
egerardus

Reputation: 11486

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.

Upvotes: 2

Evan Trimboli
Evan Trimboli

Reputation: 30082

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

});

Upvotes: 1

Related Questions