在 Ext.panel.Panel 中查找字段答案

【问题标题】：Find field in Ext.panel.Panel在 Ext.panel.Panel 中查找字段
【发布时间】：2017-11-01 13:57:09
【问题描述】：

在Ext.form.Panel 我们可以找到所有这样的字段：form.findField('field_name')

有没有一种简单的方法可以在Ext.panel.Panel 中查找字段？

【问题讨论】：

标签： extjs extjs6

【解决方案1】：

有没有一种简单的方法可以在 Ext.panel.Panel 中查找字段？

在panel 或任何其他组件（仅包含某些项目的组件）中是的，您可以使用不同的方式找到组件。

1. 使用down() 检索与传递的选择器匹配的此容器的第一个后代。

2. 使用getComponent() 会尝试默认组件查找。如果在正常项目中没有找到该组件，则搜索停靠项并返回匹配的组件（如果有）。

3. 使用Ext.ComponentQuery.query 可以在Ext.ComponentManager（全局）或文档上的特定Ext.container.Container 中搜索组件，其语法与CSS 选择器相似。返回匹配组件的数组，或空数组。

我在这里创建了一个sencha fiddle 演示，你可以在这里查看它是如何工作的。

Ext.create('Ext.panel.Panel', {
    bodyPadding: 5, // Don't want content to crunch against the borders
    width: '100%',
    title: 'Find Components',
    layout: {
        type: 'vbox',
        align: 'center',
        pack: 'center'
    },
    items: [{
        xtype: 'textfield',
        name: 'fullname',
        itemId: 'fullname',
        fieldLabel: 'Name'
    }, {
        xtype: 'datefield',
        name: 'dob',
        itemId: 'dob',
        fieldLabel: 'Date Of Birth'
    }, {
        xtype: 'combobox',
        name: 'state',
        itemId: 'state',
        store: Ext.create('Ext.data.Store', {
            fields: ['abbr', 'name'],
            data: [{
                "abbr": "AL",
                "name": "Alabama"
            }, {
                "abbr": "AK",
                "name": "Alaska"
            }, {
                "abbr": "AZ",
                "name": "Arizona"
            }]
        }),
        fieldLabel: 'Choose State',
        queryMode: 'local',
        valueField: 'abbr'
    }, {
        xtype: 'numberfield',
        name: 'mobile',
        itemId: 'mobile',
        fieldLabel: 'Mobile Number'
    }, {
        xtype: 'textareafield',
        name: 'feedback',
        itemId: 'feedback',
        fieldLabel: 'Feedback'
    }, {
        xtype: 'button',
        text: 'Get All Component',
        handler: function () {
            this.up('panel').doGetAllComponent(['dob','fullname','state','feedback','mobile']);
        }
    }],
    renderTo: Ext.getBody(),
    doGetAllComponent: function (data) {
        var panel = this;
        data.map(function (value) {
            console.log('find component using name config');
            console.log(panel.down('[name=' + value + ']'));
            console.log('find component using itemId');
            console.log(panel.down('#' + value));
            console.log('find component using getComponent ');
            console.log(panel.getComponent(value));
            console.log('find component using Ext.ComponentQuery.query()');
            console.log(Ext.ComponentQuery.query('#' + value)[0]);
        });
    }
});

【讨论】：

【解决方案2】：

Ext.ComponentQuery.query(); 是你的朋友。基本上，此功能允许您使用 jquery-esque 选择器搜索应用程序中的任何 ext 元素。见：http://docs.sencha.com/extjs/6.0.1/classic/Ext.ComponentQuery.html

另一种选择是使用 down() 函数搜索对象的子对象或使用 up() 函数搜索祖先。即：panel.down('field') 产生所有字段 xtype 元素，它们是面板变量中任何内容的后代（在任何级别上）。注意：并非所有的 Ext 元素都有 up 和 down 方法。在这种情况下，您仍然可以使用组件查询并在选择器部分中表示层次结构。

【讨论】：

容器具有查询子级的方法。组件只有在自身之上查询的方法。
感谢您的补充。如您所见，我并不真正了解其背后的机制。 ;)

【解决方案3】：

Ext.ComponentQuery, up/Down, Ext.get() 通常它会影响你的应用程序的性能。您可以使用计时器功能测试组件拉取的行为。我的建议是命名参考。

查看

{
    xtype: 'numberfield',
    name: 'mobile',
    itemId: 'numMobileId',
    fieldLabel: 'Mobile Number'
},

控制器：

refs:{
  'numMobileId' : 'PersonalInfo [itemId='numMobileId']';
}

【讨论】：

这是错误的，它不会对性能产生任何可衡量的影响。如果要使用命名引用，则应在组件上使用reference，并应从控制器调用lookupReference。
@EvanTrimboli 请阅读我的回答两次。并尝试在代码中执行你会得到它的区别。我在 Extjs6 中使用了名称参考来衡量性能，与所有相比都更好
我说的是一个可测量的差异，除非你每秒多次执行此代码，否则这无关紧要。
@EvanTrimboli 我也测试过清除缓存。我得到了同样的报告。所以只有我 100% 确定组件的使用情况。
我真的不知道你在说什么。它不会在现实世界的应用程序中产生可衡量的差异。