Как запросить текущий расширенный элемент в макете аккордеона - PullRequest
Новая
       27

Как запросить текущий расширенный элемент в макете аккордеона

3 голосов
/ 21 сентября 2011

ОК, вот как я могу найти свернутый ток в макете аккордеона: 

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

Как таким же образом я могу найти расширенный?Я не вижу расширенной собственности.Более того, этот код: 

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

разрушает мой браузер.

UPD: вот мое решение, основанное на примере в документах ExtJS: 

 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;
   };

И тогда я просто задаю вопрос таким образом Ext.getCmp("myaccordion").query(">*:expanded")

Но можем ли мы сделать его короче, используя :not как-нибудь?

Ответы [ 2 ]

2 голосов
/ 16 апреля 2012

Вам не нужно использовать функцию для этого запроса компонента.

Если у вас есть другие панели в вашей структуре, которые не свернуты query('[collapsed=false]') также будет включать те панели, которые, вероятно, были вашей проблемой.были.

Но вы можете ограничить запрос только direct children, позвонив вместо этого child: 

Ext.getCmp("myaccordion").child("[collapsed=false]");

Или вы можете ограничить его непосредственными детьми всама строка селектора, если вы даете аккордеону конфигурацию id, как это выглядит, как вы это делали: (id: 'myaccordion').Вы можете использовать: 

Ext.ComponentQuery.query('#myaccordion > panel[collapsed=false]')

Если аккордеон настроен только для одной расширенной панели за раз (конфигурация по умолчанию), которая даст вам массив с одним элементом - расширенной панелью.Если у вас более одной развернутой панели, каждая из них будет содержаться в массиве.

1 голос
/ 22 сентября 2011

Вы можете сделать: 

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

});
...