ExtJS 组件查询答案

【问题标题】：ExtJS Component QueryExtJS 组件查询
【发布时间】：2021-05-05 10:02:46
【问题描述】：

我希望使用组件查询功能来查找组件，而不是按属性值，而是按属性名称，其中属性名称本身应该是通配符。

所以我有一个具有以下配置的组件：

var component = Ext.create({
  xtype: 'container',
  foobar: 'something',
  foobar2: 'something else'
});

我希望能够找到所有具有以 foobar 开头的属性的元素。类似的东西

var els = Ext.ComponentQuery.query('[foobar*]');

我将如何实现这一目标？这是一个选项吗？

【问题讨论】：

标签： extjs extjs7

【解决方案1】：

我在文档中没有找到默认方式。一个可能的解决方案是自定义匹配器函数，它检查每个组件的以给定参数开头的属性。然后，您可以覆盖所有 ext 组件以具有此匹配器功能。（如果您已经在使用自定义组件，您可以创建 mixin）

例如：

    Ext.override(Ext.Component, {
        insensetivePropQuery: function(prop) {
            var matched = false;

            Ext.Object.each(this, function(key, value, myself) {
                if(Ext.String.startsWith(key, prop) === true) {
                    matched = true;
                    return false;
                }
            });
            return matched;
        }
    });

查询示例：

Ext.ComponentQuery.query('{insensetivePropQuery("foobar")}');

这是一个可用的 sencha fiddle 示例（使用 ExtJS 7.3.x 材料）：example

【讨论】：

很棒的东西 - 像魅力一样工作！非常感谢！！！