Extjs4中的ComponentQuery

快来打我* 2022-07-17 03:39 158阅读 0赞

用来找特点的所有容器(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\}