關於Ext3選擇器

cmp選擇器

http://blog.csdn.net/hyeidolon/article/details/38759665

選擇器 Ext.ComponentQuery.query

基於xtype查找組件: var panels = Ext.ComponentQuery.query('panel');

查找二級xtype：var buttons = Ext.ComponentQuery.query('panel button');

基於屬性值檢索組件：var saveButton = Ext.ComponentQuery.query('button[action="saveUser"]');

混合查找組件：var buttonsAndTextfields = Ext.ComonentQuery.query('button, textfield');

基於ID查找組件：var usersPanel = Ext.ComponentQuery.query('#usersPanel');

基於組件的presence（不太明白這個應該怎麼翻譯）：var extraOptionsComponents = Ext.ComponentQuery.query('component[extraOptions]');

使用組件的成員方法查找：var validField = Ext.ComponentQuery.query('form > textfield{isValid()}');

dom選擇器

http://www.cnblogs.com/anbylau2130/p/3598400.html

基本選擇符

1：*:選擇任何元素       Ext.qurey("*")

2: E：根據元素標記E選擇元素   Ext.query("E")    //E爲元素標記，input，div

3: E F：選擇包含在標記E中的標記F   Ext.query("E F") //E，F均爲元素標記

4： E>F：選擇包含在標記E中的直接子標記F  Ext.query("E>F")    //E，F均爲元素標記

5:  E+F:選擇全部緊接在元素E後的元素F    Ext.query("E+F")   

6: E~F:選擇在元素E以後同層的元素F  Ext.query("E~F") 

7: #ID ：選擇id屬性值爲ID的元素   Ext.query("#ID") 

8：.classname:選擇css類名爲classname的元素   Ext.query("E .classname") //E爲元素標記，className爲css類名

 

 

屬性選擇符

1.[attribute]:選擇帶有屬性attribute的元素

語法：

Ext.query("[attribute]")

Ext.query("E[attribute]")

 

2.[attribute=value];選擇attribute的屬性元素爲value的元素

Ext.query("[attribute=value]")

Ext.query("E[attribute=value]")

 

3.[attribute^=value]:選擇attribute的屬性以value開頭的元素

Ext.query("[attribute^=value]")

Ext.query("E[attribute^=value]")

 

4.[attribute$=value]:選擇attribute的屬性以value結尾的元素

Ext.query("[attribute$=value]")

Ext.query("E[attribute$=value]")

 

5.[attribute*=value]:選擇attribute的屬性值包含value的元素

Ext.query("[attribute*=value]")

Ext.query("E[attribute*=value]")

 

6,[attribute%=value]:選擇attribute的屬性值能整除value的元素

Ext.query("[attribute%=value]")

Ext.query("E[attribute%=value]")

 

7.[attribute!=value]:選擇attribute的屬性值不等於value的元素

Ext.query("[attribute!=value]")

Ext.query("E[attribute!=value]")

 

 

Css屬性值選擇器

和屬性選擇符相似

不一樣之處：

1,使用{}代替屬性選擇符中的[]

2,不要使用沒有屬性值的語法，如：Ext.qurey("input{display}"),緣由-css屬性和元素屬性不一樣，一直是存在的，因此使用Ext.qurey("input")的結果是同樣的

3，通過compile方法變異後的屬性函數中，byAttribute方法調用的custom參數值爲‘{’

4，在byAttribute方法中，會調用DomQurey對象的getStyle方法獲取css屬性值

5，注意padding，background等能夠合併定義的css屬性，查詢時必須拆分紅單一的屬性

如padding-left,padding-right,或background-color

 

 

僞類選擇符

1,E:first-child：選擇元素E，且其爲父節點的第一個子節點

   Ext.query("E:first-child") 如： Ext.query("input:first-child")

2，E:last-child：選擇元素E，且其爲父節點的最後一個子節點

   Ext.query("E:last-child") 如： Ext.query("input:last-child")

3,E:nth-child(n) :選擇標記爲E，且其爲父節點的第N（N>=1）個子節點

   Ext.query("E:nth-child(n)") 如：Ext.query("input:nth-child(10)")

4.E:nth-child(odd)或：E:odd  選擇標記爲E，且其爲父節點的 奇數子節點的元素

   Ext.qurey("E:nth-child(odd)")如：Ext.qurey("input:nth-child(odd)")

5.E:nth-child(even)或：E:even  選擇標記爲E，且其爲父節點的 偶數子節點的元素

   Ext.qurey("E:nth-child(even)")如：Ext.qurey("input:nth-child(even)")

6.E:only-child  選擇標記其爲父節點的惟一子節點的元素

    Ext.qurey("E:only-child ")如：Ext.qurey("input:E:only-child ")

7.E:checked 選擇標記爲E，且其checked屬性爲true的元素

   Ext.qurey("E:checked")

8.E:first 選擇標記爲E，的第一個元素

   Ext.qurey("E:first ")

9.E:last 選擇標記爲E的最後一個元素

   Ext.qurey("E:checked")

10.E：nth(n) 標記爲E的元素集合中的第n個元素

Ext.qurey("E：nth(n)")

11.E:contains(str) 選取標記爲E，且其innerHtml屬性值包含str的元素