Ext JS 控件查询方法

Ext JS提供了单例类Ext.ComponentQuery 用于在页面中搜索组件，其语法和CSS选择器非常相似。主要是使用Ext.ComponentQuery.query() 这个方法来查询，其返回值是数组：Ext.Component[]，看一个例子：

Ext.onReady(function () { //容器C Ext.create('Ext.container.Container', { id: 'myContainer', renderTo: Ext.getBody(), padding: '5 5 5 5', layout: { type: 'vbox' }, items: [{ //编号1 xtype: 'textfield', fieldLabel: 'First Name' }, { //编号2 xtype: 'textfield', fieldLabel: 'Last Name' }, { //容器B xtype: 'panel', layout: 'vbox', items: [{ //编号3 xtype: 'datefield', fieldLabel: 'Date of Birth' }, { //容器A xtype: 'container', items: [{ //编号4 xtype: 'textfield', fieldLabel: 'email', itemId: 'email' }] }] } ] }); var dateFields = Ext.ComponentQuery.query('datefield'); console.log(dateFields);//这是一个数组！ console.log(dateFields[0].fieldLabel);//输出：Date of Birth var dateFieldsInPanels = Ext.ComponentQuery.query('panel > datefield'); console.log(dateFieldsInPanels[0].fieldLabel);//输出：Date of Birth var emailInMyContainer = Ext.ComponentQuery.query('#myContainer #email'); console.log(eemailInMyContainer[0].fieldLabel);//输出：email });

组件可以通过下表的方式检索：

查询类型例子（上面的案例）xtypeExt.ComponentQuery.query(‘datefield’)结果：编号3itemId 或 idExt.ComponentQuery.query(‘#email’)（id前需要加上#符号）结果：编号4AttributesExt.ComponentQuery.query(‘textfield[fieldLabel=”Last Name”]’)结果：编号2descendantExt.ComponentQuery.query(‘#myContainer textfield’)结果：编号1、2、3、4，因为datefield是textfield的子类，也算一个Direct childExt.ComponentQuery.query(‘#myContainer > textfield’)结果：编号1、2，因为编号3、4是孙辈，不算ParentExt.ComponentQuery.query(‘#email ^ container’)结果：容器A、B、C