Question

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

是否有一种简单的方法可以在Ext.panel.Panel找到字段？

Answer 1

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

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

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

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

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

Answer 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元素都有上下方法。在这种情况下，您仍然可以使用componentquery并在选择器部分中表示层次结构。

Answer 3

Ext.ComponentQuery，up / Down，Ext.get（）通常会影响应用程序的性能。您可以使用计时器功能测试组件拉动的行为。我建议最好选择命名参考。

＆＃xA;＆＃xA;

查看

＆＃XA;＆＃XA;

 <代码> {＆＃XA; xtype：'numberfield'，＆＃xA;名称：'mobile'，＆＃xA; itemId：'numMobileId'，＆＃xA; fieldLabel：'手机号码'＆＃xA;}，＆＃xA;

＆＃xA;＆＃xA;

控制器：

＆＃ XA;＆＃XA;

 <代码>参考文献：{＆＃XA; 'numMobileId'：'PersonalInfo [itemId ='numMobileId']';＆＃xA;}＆＃xA;

＆＃xA;

在Ext.panel.Panel中查找字段

3 个答案: