Question

好的，这就是我在手风琴布局中找到当前折叠的方式：

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

我是如何以同样的方式找到扩展的？我看不到扩大的财产。而且，这段代码：

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

压碎我的浏览器。

UPD：这是我的决定，基于ExtJS文档中的example：

 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缩短它吗？

Answer 1

您不必为此组件查询使用函数。

如果您的框架中某处未折叠的其他面板query('[collapsed=false]')也会包含那些可能是您遇到的问题。

但您可以通过调用child来限制查询仅限直接子项：

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

或者，如果你给手风琴一个id配置，你可以限制它直接指向选择器字符串中的子节点，就像你看到的那样:( id: 'myaccordion'）。您可以使用：

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

如果手风琴一次只配置一个扩展面板（默认配置），它将为您提供一个带有一个项目的阵列 - 扩展面板。如果你有多个扩展面板，它们将分别包含在数组中。

Answer 2

你可以这样做：

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

});

如何在手风琴布局中查询当前展开的项目

2 个答案: