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

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

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