ID選擇器
根據組件id來選擇組件，具有唯一性。前面以”#”號來標志,返回itemid或者id為“panel”的組件實例
var panel = Ext.ComponentQuery.query('#panel');
類別選擇器
類選擇器根據類的xtype來選擇，可選擇前面是否以”.”來標志，如：根據xtype返回所有Ext.GridPanel實例
var cmp= Ext.ComponentQuery.query('gridpanel');
var cmp= Ext.ComponentQuery.query('.gridpanel');
panel#myPanel 可以通過xtype與id,itemId組件匹配 查找xtype為panel並且id或者itemId為myPanel的所有組件
屬性選擇器
根據組件的屬性來選擇，可以選擇具有某個屬性的組件，或者屬性為特定值的組件。
var btnOk= Ext.ComponentQuery.query('button[iconCls]'); -返回具有iconCls屬性的Ext.Button的實例
Ext.ComponentQuery.query('component[autoScroll]') - 匹配xtype為component的所有組件,並且autoScroll不等於空,不等於false.
也可以選擇某個屬性為特定值的組件
var btnOk= Ext.ComponentQuery.query('button[text = "ok"]'); -返回text屬性為“ok”的Ext.Button的實例
值得注意的是,屬性可以是任何自定義屬性
Ext.create("Ext.Panel", { myAttribute: "helloWorld" });
Ext.ComponentQuery.query('panel[myAttribute= "helloWorld"]'); -自定義屬性也可以匹配的到
后代選擇器
后代選擇器也稱為包含選擇器，用來選擇特定容器或容器組的后代，后代選擇器由兩個常用選擇器，中間加一個空格表示。其中前面的選擇器選擇父組件，后面的選擇器選擇后代組件。
var panelsWithinmyCt = Ext.ComponentQuery.query('#myCt panel'); --返回所有id為“myCt”的容器中Ext.Panel實例
E F All descendant Components of E that match F (官方說明-遞歸向下查詢所有可以匹配的組件)
子選擇器
請注意這個選擇器與后代選擇器的區別，子選擇器（child selector）僅是指它的直接后代，而后代選擇器是作用於所有子后代組件。后代選擇器通過空格來進行選擇，而子選擇器是通過“>”進行選擇，我們看下面的代碼：
var directChildPanel = Ext.ComponentQuery.query('#myCt > panel'); --返回所有id為“myCt”的容器的子組件中的Ext.Panel實例
E > F All direct children Components of E that match F (官方說明-查詢直接后代,子孫后代則不匹配)
Ext.create("Ext.Panel", { itemId: "myCt", itmes:[{ xtype: "panel", html : "我是myCt的直接后代", itmes: [{ xtype: "panel", html : "我是myCt的子孫后代", }] }] });
向上選擇
E ^ F All parent Components of E that match F
Ext.ComponentQuery.query('textfield ^ form') 查找給定元素 的父容器 （遞歸向上查找所有匹配元素)
Attribute matching operators(屬性匹配運算符)
The '=' operator will return the results that exactly match the specified object property (attribute):
Ext.ComponentQuery.query('panel[cls=my-cls]'); --精確匹配,匹配xtype為panel的元素,並且cls='my-cls'
會匹配如下組件:
Ext.create('Ext.window.Window', { cls: 'my-cls' })
但是不會匹配如下組件:
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 that exactly matches one of the whitespace-separated values. This is also true for properties that only have one value:
Ext.ComponentQuery.query('panel[cls~=my-cls]'); --匹配xtype為panel 並且cls='my-cls' 或者 cls 包含 'my-cls'的所有組件
會匹配下列組件
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]'); ----匹配屬性以給定值結尾的組件
Ext.create('Ext.form.field.Text', { fieldLabel: 'Enter your name' });
*= 表達式會匹配屬性中包含某個值 無論出現在什么地方都可以匹配
Ext.ComponentQuery.query('Ext.ComponentQuery.query('panel[fuck*=NameIs])');
var p = Ext.create("Ext.panel.Panel", { mytest: "myNameIsJack", width: 300, height: 200 });
@=表達式會匹配組件顯示聲明的屬性,不會去查詢原型鏈中的屬性
The following test will find panels with their ownProperty collapsed being equal to false. It will not match a collapsed property from the prototype chain
Ext.ComponentQuery.query('panel[@collapsed=false]')
會匹配如下組件
Ext.create('Ext.panel.Panel', { collapsed: false });
不會匹配下面的情況,不會通過prototype-china鏈進行查找
Ext.create('Ext.panel.Panel', { });
var disabledFields = myFormPanel.query("{isDisabled()}"); --可以根據組件的方法進行查找,返回所有isDisabled()返回true的組件
有的時候我們需要自定義的邏輯進行匹配,那么我們可以再組件中定義我們自己的方法.如下:
Ext.ComponentQuery.query("{myMatcher('myPanel')}");
但是需要注意必須在所有組件中聲明該方法,不然會出現異常.所以我們可以override Ext.Component這個類,默認返回false.然后再子類重寫該方法 如下:
Ext.define('My.Component', { override: 'Ext.Component', myMatcher: function() { return false; } }); Ext.define('My.Panel', { extend: 'Ext.panel.Panel', requires: ['My.Component'], // Ensure that Component override is applied
myMatcher: function(selector) { return selector === 'myPanel'; } });
Conditional matching(條件匹配)
Attribute matchers can be combined to select only Components that match all conditions (logical AND operator):
匹配同時滿足多個條件的匹配表達式
Ext.ComponentQuery.query('panel[cls~=my-cls][floating=true][title$="sales data"]');
//匹配xtype為panel的 並且同時滿足[cls~=my-cls][floating=true][title$="sales data"]條件的所有組件
Expressions separated with commas will match any Component that satisfies either expression (logical OR operator):
匹配用逗號分隔的滿足任意一個條件的組件
Ext.ComponentQuery.query('field[fieldLabel^=User], field[fieldLabel*=password]');
//匹配倆種條件field[fieldLabel^=User], field[fieldLabel*=password] 其中的一種條件,或者的關系.只要滿足其中一個就匹配得到
Pseudo classes(偽類選擇器)
:first
// 查詢滿足條件的第一個元素
Ext.ComponentQuery.query('panel > button:first');
:last
//查詢滿足條件的最后一個元素
Ext.ComponentQuery.query('form[title=Profile] field:last');
:focusable
//返回可以獲得焦點的組件
panel.down(':focusable').focus();
:not
//給定一個選擇器,匹配相反的結果,返回所有field 但是xtype不是hiddenfield的組件
form.query('field:not(hiddenfield)');
紅色部分可以放任何選擇器表達式 比如 title^=hello
:nth-child 查詢奇數，偶數 每隔3個
// Find every odd field in a form
form.query('field:nth-child(2n+1)'); // or use shortcut: :nth-child(odd)
// Find every even field in a form
form.query('field:nth-child(2n)'); // or use shortcut: :nth-child(even)
// Find every 3rd field in a form
form.query('field:nth-child(3n)');
自定義選擇器
//定義一個篩選的方法
// Function receives array and returns a filtered array.
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 = Ext.ComponentQuery.query('field:invalid', myFormPanel);
//還可以給自定義的選擇器穿參數
// Handler receives array of itmes and selector in parentheses
Ext.ComponentQuery.pseudos.titleRegex = function(components, selector) { var i = 0, l = components.length, c, result = [], regex = new RegExp(selector); for (; i < l; i++) { c = components[i]; if (c.title && regex.test(c.title)) { result.push(c); } } return result; } var salesTabs = tabPanel.query('panel:titleRegex("sales\\s+for\\s+201[123]")');
在容器中查詢
query方法查詢過程中，默認會遍歷所有組件。顯然這個是十分影響效率的，把搜索范圍限定起來，能使查詢速度大大提高。還記得query方法的第二個參數嗎？我們這樣做：
var btnRefresh = Ext.ComponentQuery.query('#btnRefresh', container);
另一種方式個人比較推薦，因為它看起來特別地干凈利落：
var btnRefresh = container.query('#btnRefresh');
說到這里，就不能不提提Container類中用於查詢組件的幾個方法了。
Container中的query方法、down方法、child方法和up方法，都是基於組件選擇器而實現的組件查詢方法，調用這些方法，可以很輕松地獲取想要的組件。
區別列舉如下：
query 后代組件 所有符合條件的組件集合
down 后代組件 第一個符合條件的組件
child 子組件 第一個符合條件的組件
up 祖先組件 第一個符合條件的組件