一個UI前臺組件肯定會比較多，我們通常習慣性的使用ID來獲取需要操作的組件，但是這種方法是extjs推薦的么？有沒有extjs推薦使用的獲取組件的方法呢？ # 目錄 - [目錄](#) - [extjs的查詢組件的API](#) - [查詢實例](#) - [基本的組件查詢](#) - [組件樹查詢](#) - [通過組件的屬性檢索](#) - [屬性匹配操作符](#) - [邏輯運算的](#) - [官方案例](#) ### extjs的查詢組件的API 組件查詢API文檔地址：5.1.0-apidocs/#!/api/Ext.ComponentQuery-method-query 可以看到是使用的Ext.ComponentQuery這個單例的query方法來進行查詢的。 ### 查詢實例 ### 基本的組件查詢 1. 查詢xtype組件 ~~~ prevField = myField.previousNode('textfield'); ~~~ 這表示查詢所有 textfield 以及繼承自TextField的組件都會被查詢。 ~~~ prevTextField = myField.previousNode('textfield(true)'); ~~~ 這表示只查詢TextField類的，其他繼承類不用去查詢，只需要傳入true表示嚴格查詢即可。 1. ID或者ItemID查找 #myContainer 當需要查詢ID定義的組件的時候，可以使用#來查詢。 1. xtype和ID或者ItemID組合使用 ~~~ panel#myPanel ~~~ 這樣可以盡可能的減少ID帶來的沖突，對xtype進行了一次過濾。 ### 組件樹查詢 看下面一個查詢實例： ~~~ window[title="Input form"] textfield[name=login] ^ form > button[action=submit] ~~~ 語句從左到右執行，執行完成一個，就按照當前找到的那個再接著往下執行。所以這句話的意思是： 找到標題為Iput form的window的叫做login的textfield的父窗體中button的提交名稱為submit的那個按鈕。 ### 通過組件的屬性檢索 上述例子就可以看到 當查詢title為Input form的window的時候就是使用的組件的屬性。 ### 屬性匹配操作符 1. = 表示嚴格等于 。 1. ~= 表示只要搜索到檢索詞即可。 1. ^= 表示以什么什么 開頭 1. $= 表示以什么什么結尾的 1. /= 表示支持正則表達式的 ### 邏輯運算的 1. and邏輯 ~~~ Ext.ComponentQuery.query('panel[cls~=my-cls][floating=true][title$="sales data"]'); ~~~ 這種類型的是表示邏輯and 1. or邏輯 ~~~ Ext.ComponentQuery.query('field[fieldLabel^=User], field[fieldLabel*=password]'); ~~~ ### 官方案例 ~~~ // retrieve all Ext.Panels in the document by xtype var panelsArray = Ext.ComponentQuery.query('panel'); // retrieve all Ext.Panels within the container with an id myCt var panelsWithinmyCt = Ext.ComponentQuery.query('#myCt panel'); // retrieve all direct children which are Ext.Panels within myCt var directChildPanel = Ext.ComponentQuery.query('#myCt > panel'); // retrieve all grids or trees var gridsAndTrees = Ext.ComponentQuery.query('gridpanel, treepanel'); // Focus first Component myFormPanel.child(':focusable').focus(); // Retrieve every odd text field in a form myFormPanel.query('textfield:nth-child(odd)'); // Retrieve every even field in a form, excluding hidden fields myFormPanel.query('field:not(hiddenfield):nth-child(even)'); ~~~