ExtJs4的组件查询ComponentQuery

阅读更多

1.ComponentQuery简介：

  ComponentQuery提供了一种类似CSS标签选择器的组件查询方式，他有两种调用方式：
     (1)直接通过ComponetManager来查询：Ext.ComponentQuery.query()

     (2)通过组件直接的Container来查询：  combo.up('form').query()

2.优点：不用指定Id，防止Id冲突

3.使用方式：

     (1)通过组件ID获取组件："#组件ID”，如果通过这种方式，那么一定要记住在组件ID前添加#号。

     (2)得到某一组件下所有的指定类型的组件："panel>button”，这种方式是查找所有panel组件下的所有button组件。

     (3)通过xtype："treepanel”或".treepanel"。Ext.ComponentQuery.query('treepanel');

     (4)通过up和down寻找上下级组件：combo.up('form')   form.down('combo')

     (5)通过previousNode寻找兄弟组件： myField.previousNode('textfield');

     (6)通过组件的一些表达式式的属性,如果表达式的返回值为true,那么对应的组件就被选中，例如：如果组件的调用isDisabled()为true的话，那么此组件就被选中
var disabledFields = myFormPanel.query("{isDisabled()}");

     (7)通过>寻找组件的直接子组件：Ext.ComponentQuery.query('#myCt > panel');

     (8)通过组件的属性进行查找：                     Ext.ComponentQuery.query("combo[name='location']")

     (9)伪类选择器(Pseudo classes)默认包含的有not,last。例如查找最后一个panel Ext.ComponentQuery.query("panel:last")

     (10)通过自定义函数进行过滤：
Ext.ComponentQuery.pseudos.invalid = function(items) {
    //...函数体
return result;
};
var invalidFields = myFormPanel.query('field:invalid');


4.注意：ComponentQuery.query得到的是一个数组(即使用ID得到只有一个)，比如取到的只有一个组件可使用Ext.ComponentQuery.query("combo[name='location']")[0]得到这个组件