Question

如何在Sencha Touch中使用Ext.ComponentQuery.query和嵌套属性？

例如

var myHardtoGetObj = topLevelView.down('someview[config.categoryCfg.id=1]')[0];

这让我得到了＃34;未被捕获的错误＆＃34;

给出：

Ext.define('SomeView', {
    xtype : 'someview',
    config : {
        categoryCfg : {
            id   : 5,
            name : 'someName' 
        }
    }
});

这可能吗？

感谢。

Answer 1

这确实是一个有趣的问题。似乎并不是一个绝对直截了当的解决方案，但是有一个相当快速的解决方法。您可以将视图代码修改为：

Ext.define('SomeView', {
   xtype : 'someview',
   config : {
       categoryCfg : {
           id   : 5,
           name : 'someName' 
       }
   },

   hasCategoryId: function (id) {
       return this.getCategoryCfg().id == id;
   }
});

然后你可以这样做一个查询：

Ext.ComponentQuery.query('someview{hasCategoryId(1)}');

或

topLevelView.down('someview{hasCategoryId(1)}');

注意：选择器的语法是 xtype {memberMethod（）} ，中间没有空格。这样两个选择器必须匹配（与CSS中的 .class1.class2 相同）。此外，选择器必须按此顺序排列，因为结果集按顺序由每个选择器过滤，如果某些组件没有hasCategoryId方法，它将会打破只有＆＃39; {hasCategoryId（1）} ＆＃39;

Answer 2

这样做的规范方法是添加自定义伪类匹配器：

Ext.ComponentQuery.pseudos.hasCategoryId = function(components, selector) {
    var result = [],
        c, i, len;

    for (i = 0, len = components.length; i < len; i++) {
        c = components[i];

        if (c.config.categoryCfg && c.config.categoryCfg.id == selector) {
            result.push(c);
        }
    }

    return result;
}

然后，您可以使用Ext.ComponentQuery.query全局使用此伪类，并使用query，down等方法在本地使用此伪类：

var allMatched, someComponent;

allMatched = Ext.ComponentQuery.query(':hasCategoryId(1)');
someComponent = myPanel.down(':hasCategoryId(42)');

了解更多在ComponentQuery doc中为猫咪涂抹皮肤的方法。

Answer 3

虽然没有完全回答这个问题，但你可以做一些努力让它发挥作用。

您可以将更新方法添加到您的nestedConfig中，如此

Ext.define('myCoolClass', {
    config : {
        nestedConfig : {
            nestedId : 5
        },

        nestedId : null
    },

    updateNestedConfig: function (nestedConfig) {
        if (nestedConfig.nestedId) {
            this.setNestedId(nestedConfig.nestedId);
        }
    }
});

通过这样做，您现在可以访问普通组件查询属性

Ext.ComponentQuery.query('[nestedId=555]')

举个例子。如果你看一下Sencha源代码，他们就会像在NavigationView和TabPanels中那样使用它。

如何将Ext.ComponentQuery.query与嵌套属性一起使用

3 个答案: