在Ext.form.Panel
中,我们可以找到所有字段:form.findField('field_name')
是否有一种简单的方法可以在Ext.panel.Panel
找到字段?
答案 0 :(得分:2)
有没有一种简单的方法可以在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]);
});
}
});
答案 1 :(得分:0)
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并在选择器部分中表示层次结构。
答案 2 :(得分:0)
Ext.ComponentQuery,up / Down,Ext.get()通常会影响应用程序的性能。您可以使用计时器功能测试组件拉动的行为。我建议最好选择命名 参考。


查看
&#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;