Extjs4中的ComponentQuery

要注意和DomQuery区分开

用来找特点的所有容器(Ext.container.Container)或是通过Ext.ComponentManager找特定的所有组件

1.当找组件的时候，相当于调用Ext.ComponentQuery.query()

可以接收的参数有

1)xtype

//找xypte为panel的所有组件

var panelsArray = Ext.ComponentQuery.query('panel');

2)组件的itemId或id的属性值

找所有id为myct的panel组件，注意空格表示与操作(&&)

var panelsWithinmyCt = Ext.ComponentQuery.query('#myCt panel');

注:>表示直接,豆表示或操作

//表示id为myct的直接子元素中panel的组件

var directChildPanel = Ext.ComponentQuery.query('#myCt > panel');

//表示gridpanel与treepanel组件

var gridsAndTrees = Ext.ComponentQuery.query('gridpanel, treepanel');

3)根据属性查找

//表示如果组件有autoScroll属性，那么它就被先中了

var panelsWithinmyCt = Ext.ComponentQuery.query('component[autoScroll]');

var panelsWithinmyCt = Ext.ComponentQuery.query('panel[title="Test"]');

panel[title="Test"]

4)根据组件的一些表达式式的属性,如果表达式的返回值为true,那么对应的组件就被先中

//如果组件的调用isDisabled()为true的话，那么此组件就被选中

var disabledFields = myFormPanel.query("{isDisabled()}");

5)伪类选择器(Pseudo classes)

默认包含的有not,last,

//表示在document中找最后的panel组件

var panelsArray = Ext.ComponentQuery.query('panel:last');

//自定义的

Ext.ComponentQuery.pseudos.invalid = function(items) {

var i = 0, l = items.length, c, result = [];

for (; i < l; i++) {

if (!(c = items[i]).isValid()) {

result.push(c);

}

}

return result;

};

var invalidFields = myFormPanel.query('field:invalid');

if (invalidFields.length) {

invalidFields[0].getEl().scrollIntoView(myFormPanel.body);

for (var i = 0, l = invalidFields.length; i < l; i++) {

invalidFields[i].getEl().frame("red");

}

}

2.查找容器的时候

可以用Ext.container.Container.query().此方法其实是以container为根元素调用Ext.ComponentQuery.query

Ext.container.Container.down

Ext.container.Container.child

Ext.Component.up.

区分DomQuery

1.主要用于html与xml

2.有如下方式

1)可以用多选择符Ext.select('div.foo,span.foo')

2)可以选择查找的起始位置Ext.get('myEl').select('div.foo');

3)可以组查询链Ext.select('div.foo[title=bar]:first');

4)有元素选择符*,E,E F,E>F,E+F,E-F

5)可以根据属性进行查找E[foo],E[foo=bar],E[foo^$*%!=bar]

6)支持伪类选择E:first-child,E:last-child............

7)可根据CSS值进行E{display=none}

8)