ID選擇器
根據(jù)組件id來(lái)選擇組件稳懒，具有唯一性。前面以”#”號(hào)來(lái)標(biāo)志,返回itemid或者id為“panel”的組件實(shí)例
var panel = Ext.ComponentQuery.query('#panel');
類別選擇器
類選擇器根據(jù)類的xtype來(lái)選擇赋除，可選擇前面是否以”.”來(lái)標(biāo)志，如：根據(jù)xtype返回所有Ext.GridPanel實(shí)例
var cmp= Ext.ComponentQuery.query('gridpanel');
var cmp= Ext.ComponentQuery.query('.gridpanel');
panel#myPanel 可以通過(guò)xtype與id,itemId組件匹配 查找xtype為panel并且id或者itemId為myPanel的所有組件
屬性選擇器
根據(jù)組件的屬性來(lái)選擇，可以選擇具有某個(gè)屬性的組件纫溃，或者屬性為特定值的組件墨林。
var btnOk= Ext.ComponentQuery.query('button[iconCls]'); -返回具有iconCls屬性的Ext.Button的實(shí)例
Ext.ComponentQuery.query('component[autoScroll]')-匹配xtype為component的所有組件,并且autoScroll不等于空,不等于false.
也可以選擇某個(gè)屬性為特定值的組件
var btnOk= Ext.ComponentQuery.query('button[text = "ok"]'); -返回text屬性為“ok”的Ext.Button的實(shí)例
值得注意的是,屬性可以是任何自定義屬性
Ext.create("Ext.Panel", {
myAttribute:"helloWorld"});
Ext.ComponentQuery.query('panel[myAttribute= "helloWorld"]'); -自定義屬性也可以匹配的到
后代選擇器
后代選擇器也稱為包含選擇器赁酝，用來(lái)選擇特定容器或容器組的后代，后代選擇器由兩個(gè)常用選擇器旭等，中間加一個(gè)空格表示酌呆。其中前面的選擇器選擇父組件，后面的選擇器選擇后代組件搔耕。
var panelsWithinmyCt = Ext.ComponentQuery.query('#myCt panel'); --返回所有id為“myCt”的容器中Ext.Panel實(shí)例
E FAll descendant Components of E that match F (官方說(shuō)明-遞歸向下查詢所有可以匹配的組件)
子選擇器
請(qǐng)注意這個(gè)選擇器與后代選擇器的區(qū)別隙袁，子選擇器（child selector）僅是指它的直接后代，而后代選擇器是作用于所有子后代組件弃榨。后代選擇器通過(guò)空格來(lái)進(jìn)行選擇菩收，而子選擇器是通過(guò)“>”進(jìn)行選擇，我們看下面的代碼：
var directChildPanel = Ext.ComponentQuery.query('#myCt > panel'); --返回所有id為“myCt”的容器的子組件中的Ext.Panel實(shí)例
E > FAll direct children Components of E that match F (官方說(shuō)明-查詢直接后代,子孫后代則不匹配)
Ext.create("Ext.Panel", {
itemId:"myCt",
itmes:[{
xtype:"panel",
html :"我是myCt的直接后代",
itmes: [{
xtype:"panel",
html :"我是myCt的子孫后代",
}]
}]
});
向上選擇
E ^ FAll parent Components of E that match F
Ext.ComponentQuery.query('textfield ^ form')查找給定元素 的父容器 （遞歸向上查找所有匹配元素)
Attribute matching operators(屬性匹配運(yùn)算符)
The'='operator will return the results thatexactlymatch the specified object property (attribute):
Ext.ComponentQuery.query('panel[cls=my-cls]'); --精確匹配,匹配xtype為panel的元素,并且cls='my-cls'
會(huì)匹配如下組件:
Ext.create('Ext.window.Window', {
cls:'my-cls'})
但是不會(huì)匹配如下組件:
Ext.create('Ext.panel.Panel', {
cls:'foo-cls my-cls bar-cls'
});
You can use the'~='operator instead, it will return Components with the property thatexactlymatches one of the whitespace-separated values. This is also true for properties that only haveonevalue:
Ext.ComponentQuery.query('panel[cls~=my-cls]'); --匹配xtype為panel 并且cls='my-cls' 或者 cls 包含?'my-cls'的所有組件
會(huì)匹配下列組件
Ext.create('Ext.panel.Panel', {
cls:'foo-cls my-cls bar-cls'});
Ext.create('Ext.window.Window', {
cls:'my-cls'});
Ext.ComponentQuery.query('panel[title^=Sales]');--匹配xtype為panle 并且 title已Sales開頭的組件
Ext.create('Ext.panel.Panel', {
title:'Sales estimate for Q4'});
Ext.ComponentQuery.query('field[fieldLabel$=name]'); ----匹配屬性以給定值結(jié)尾的組件
Ext.create('Ext.form.field.Text', {
fieldLabel:'Enter your name'});
*= 表達(dá)式會(huì)匹配屬性中包含某個(gè)值 無(wú)論出現(xiàn)在什么地方都可以匹配
Ext.ComponentQuery.query('Ext.ComponentQuery.query('panel[fuck*=NameIs])');
varp = Ext.create("Ext.panel.Panel", {
mytest:"myNameIsJack",
width:300,
height:200});
@=表達(dá)式會(huì)匹配組件顯示聲明的屬性,不會(huì)去查詢?cè)玩溨械膶傩?/p>
The following test will find panels with theirownPropertycollapsed being equal tofalse. It will?not?match a collapsed property from the prototype chain
Ext.ComponentQuery.query('panel[@collapsed=false]')
會(huì)匹配如下組件
Ext.create('Ext.panel.Panel', {
collapsed:false});
不會(huì)匹配下面的情況,不會(huì)通過(guò)prototype-china鏈進(jìn)行查找
Ext.create('Ext.panel.Panel', {
});
var disabledFields = myFormPanel.query("{isDisabled()}"); --可以根據(jù)組件的方法進(jìn)行查找,返回所有isDisabled()返回true的組件
有的時(shí)候我們需要自定義的邏輯進(jìn)行匹配,那么我們可以再組件中定義我們自己的方法.如下:
Ext.ComponentQuery.query("{myMatcher('myPanel')}");
但是需要注意必須在所有組件中聲明該方法,不然會(huì)出現(xiàn)異常.所以我們可以overrideExt.Component這個(gè)類,默認(rèn)返回false.然后再子類重寫該方法 如下:
Ext.define('My.Component', {
override:'Ext.Component',
myMatcher:function() {returnfalse; }
});
Ext.define('My.Panel', {
extend:'Ext.panel.Panel',
requires: ['My.Component'],//Ensure that Component override is appliedmyMatcher:function(selector) {returnselector === 'myPanel';
}
});
Conditional matching(條件匹配)
Attribute matchers can be combined to select only Components that matchallconditions (logical AND operator):
匹配同時(shí)滿足多個(gè)條件的匹配表達(dá)式
Ext.ComponentQuery.query('panel[cls~=my-cls][floating=true][title$="sales data"]');
//匹配xtype為panel的 并且同時(shí)滿足[cls~=my-cls][floating=true][title$="sales data"]條件的所有組件
Expressions separated with commas will match any Component that satisfies?either?expression (logical OR operator):
匹配用逗號(hào)分隔的滿足任意一個(gè)條件的組件
Ext.ComponentQuery.query('field[fieldLabel^=User], field[fieldLabel*=password]');
//匹配倆種條件field[fieldLabel^=User], field[fieldLabel*=password] 其中的一種條件,或者的關(guān)系.只要滿足其中一個(gè)就匹配得到
Pseudo classes(偽類選擇器)
:first
// 查詢滿足條件的第一個(gè)元素
Ext.ComponentQuery.query('panel > button:first');
:last
//查詢滿足條件的最后一個(gè)元素
Ext.ComponentQuery.query('form[title=Profile] field:last');
:focusable
//返回可以獲得焦點(diǎn)的組件
panel.down(':focusable').focus();
:not
//給定一個(gè)選擇器,匹配相反的結(jié)果,返回所有field 但是xtype不是hiddenfield的組件
form.query('field:not(hiddenfield)');
紅色部分可以放任何選擇器表達(dá)式 比如 title^=hello
:nth-child 查詢奇數(shù)鲸睛，偶數(shù) 每隔3個(gè)
//Find every odd field in a formform.query('field:nth-child(2n+1)');//or use shortcut: :nth-child(odd)//Find every even field in a formform.query('field:nth-child(2n)');//or use shortcut: :nth-child(even)//Find every 3rd field in a formform.query('field:nth-child(3n)');
自定義選擇器
//定義一個(gè)篩選的方法
//Function receives array and returns a filtered array.Ext.ComponentQuery.pseudos.invalid =function(items) {vari = 0, l = items.length, c, result =[];for(; i < l; i++) {if(!(c =items[i]).isValid()) {
result.push(c);
}
}returnresult;
};
//使用前面構(gòu)造的方法進(jìn)行查詢
var invalidFields = Ext.ComponentQuery.query('field:invalid', myFormPanel);
//還可以給自定義的選擇器穿參數(shù)
//Handler receives array of itmes and selector in parenthesesExt.ComponentQuery.pseudos.titleRegex =function(components, selector) {vari = 0, l = components.length, c, result = [], regex =newRegExp(selector);for(; i < l; i++) {
c=components[i];if(c.title &?ex.test(c.title)) {
result.push(c);
}
}returnresult;
}varsalesTabs = tabPanel.query('panel:titleRegex("sales\\s+for\\s+201[123]")');
在容器中查詢
query方法查詢過(guò)程中娜饵，默認(rèn)會(huì)遍歷所有組件。顯然這個(gè)是十分影響效率的腊凶，把搜索范圍限定起來(lái)划咐，能使查詢速度大大提高拴念。還記得query方法的第二個(gè)參數(shù)嗎？我們這樣做：
var btnRefresh = Ext.ComponentQuery.query('#btnRefresh', container);
另一種方式個(gè)人比較推薦褐缠，因?yàn)樗雌饋?lái)特別地干凈利落：
var btnRefresh = container.query('#btnRefresh');
說(shuō)到這里政鼠，就不能不提提Container類中用于查詢組件的幾個(gè)方法了。
Container中的query方法队魏、down方法公般、child方法和up方法，都是基于組件選擇器而實(shí)現(xiàn)的組件查詢方法胡桨，調(diào)用這些方法官帘，可以很輕松地獲取想要的組件。
區(qū)別列舉如下：
query 后代組件 所有符合條件的組件集合
down 后代組件 第一個(gè)符合條件的組件
child 子組件 第一個(gè)符合條件的組件
up 祖先組件 第一個(gè)符合條件的組件
