一UI前部組件勢(shì)必更加，我們通常習(xí)慣性使用ID獲取部件操作的需要。但是，這種方法是extjs推薦么？你有嗎extjs利用它來獲取組件的推薦方法？

夾

• 文件夾
  • extjs的查詢組件的API
  • 查詢實(shí)例
    • 主要的組件查詢
    • 組件樹查詢
    • 通過組件的屬性檢索
    • 屬性匹配操作符
    • 邏輯運(yùn)算的
  • 官方案例

extjs的查詢組件的API

組件查詢API文檔地址：5.1.0-apidocs/#!/api/Ext.ComponentQuery-method-query
能夠看到是使用的Ext.ComponentQuery這個(gè)單例的query方法來進(jìn)行查詢的。

查詢實(shí)例

主要的組件查詢

查詢xtype組件

prevField = myField.previousNode('textfield');

這表示查詢?nèi)?textfield 以及繼承自TextField的組件都會(huì)被查詢。

prevTextField = myField.previousNode('textfield(true)');

這表示僅僅查詢TextField類的。其它繼承類不用去查詢。僅僅須要傳入true表示嚴(yán)格查詢就可以。

ID或者ItemID查找

#myContainer
當(dāng)須要查詢ID定義的組件的時(shí)候。能夠使用#來查詢。

xtype和ID或者ItemID組合使用

panel#myPanel

這樣能夠盡可能的降低ID帶來的沖突，對(duì)xtype進(jìn)行了一次過濾。

組件樹查詢

看以下一個(gè)查詢實(shí)例：

window[title="Input form"] textfield[name=login] ^ form > button[action=submit]

語句從左到右運(yùn)行，運(yùn)行完畢一個(gè)，就依照當(dāng)前找到的那個(gè)再接著往下運(yùn)行。所以這句話的意思是：
找到標(biāo)題為Iput form的window的叫做login的textfield的父窗口中button的提交名稱為submit的那個(gè)按鈕。

通過組件的屬性檢索

上述樣例就能夠看到 當(dāng)查詢title為Input form的window的時(shí)候就是使用的組件的屬性。

屬性匹配操作符

=
表示嚴(yán)格等于 。

~=
表示僅僅要搜索到檢索詞就可以。

^=
表示以什么什么 開頭

$=
表示以什么什么結(jié)尾的

/=
表示支持正則表達(dá)式的

邏輯運(yùn)算的

and邏輯

Ext.ComponentQuery.query('panel[cls~=my-cls][floating=true][title$="sales data"]');

這樣的類型的是表示邏輯and

or邏輯

Ext.ComponentQuery.query('field[fieldLabel^=User], field[fieldLabel*=password]');

官方案例

// retrieve all Ext.Panels in the document by xtypevar panelsArray = Ext.ComponentQuery.query('panel');// retrieve all Ext.Panels within the container with an id myCtvar panelsWithinmyCt = Ext.ComponentQuery.query('#myCt panel');// retrieve all direct children which are Ext.Panels within myCtvar directChildPanel = Ext.ComponentQuery.query('#myCt > panel');// retrieve all grids or treesvar gridsAndTrees = Ext.ComponentQuery.query('gridpanel, treepanel');// Focus first ComponentmyFormPanel.child(':focusable').focus();// Retrieve every odd text field in a formmyFormPanel.query('textfield:nth-child(odd)');// Retrieve every even field in a form, excluding hidden fieldsmyFormPanel.query('field:not(hiddenfield):nth-child(even)');

轉(zhuǎn)載于:https://www.cnblogs.com/gcczhongduan/p/5047996.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的[ExtJS5学习笔记]第三十五条 sencha extjs 5 组件查询方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。