Extjs4---ComponentQuery

對於Extjs3.x來說,Extjs4.0元件查詢使用了ComponentQuery類，這個類是用來查詢容器內的元件的。實現方式類似於CSS的Selector。

 

對於Extjs3.x來說,Extjs4.0元件查詢使用了ComponentQuery類，這個類是用來查詢容器內的元件的。實現方式類似於CSS的Selector。在extjs3.x中，查詢元件的方式有很多，例如：（ID元件ID）、(ref元件引用)、（items.get(0)元件的層級）。在extjs4.0中，則多了ComponentQuery。利用這個類，將更加方便的查詢元件。下面，則是將extjs3和extjs4各種查詢元件的方式做下對比。

Extjs3.x：

ID：這就是所熟知的Ext.getCmp(“元件ID”)，雖然說這種方式查詢元件最直接，也最容易，但是如果隨著程式體積變大，元件越來越多，那麼可能會發生元件ID相同的事情發生，這樣一來，就可能發生顯示的問題和獲取物件不正常。

ref：在EXTJS3中，所有的元件都會有一個ref屬性，也就是reference的意思。這種方式是通過對元件的引用而得到元件物件。例如：ref:’mypanel’，但是這種方式的侷限性在於，他只能查詢不同層級之間的元件。也就是說A[a,b,c] C[d,e,f]，這樣的方式，使用ref非常方便，但如果是B[c,c,d]這樣的方式，就會出現問題，因為在某一層級上，出項了兩個相同的元件。

items.get(0)：這種方式是通過首先獲得元件中元素的一個陣列，然後通過陣列獲得想要的元件物件，這種方式，我們一般不會用到，因為，他非常不靈活，如果我們的元素層級發生改變的話，我們將不能獲取我們想要的元件，維護起來也非常困難。所以，這種方式，是用的最少的一種方式。

在Extjs4.0中，我們依然可以沿用Extjs3.x中查詢元件的方式，但是在Extjs4.0中，我們可以利用ComponentQuery，方便找到對應元件。

1、 通過元件ID獲取元件："#元件ID”，如果通過這種方式，那麼一定要記住在元件ID前新增#號。

2、 得到某一元件下所有的指定型別的元件："panel>button”，這種方式是查詢所有panel元件下的所有button元件。

3、 通過xtype："treepanel”或".treepanel

4、如果想獲取所有button並且action為save的button，則可以使用"button[action=save] "，又或者獲取所有panel，並且autoscroll屬性為true的panel，則可以使用"panel[autoScroll=true]"

還有兩種方式，是查詢某一元件的子元件或上級元件，例如：

1、查詢window下的form：win.down(“form”)

2、查詢button的父元件window:button.up(“window”);

最明顯的例子就是我們在extjs4.0使用MVC模式進行開發的時候，經常會在control控制中大量使用'viewport > panel'，’edit button[action=save]’這類查詢，當我們點選button進行資料儲存的時候，我們會使用

這型別的查詢進行資料更新。

最後，在extjs4.0 MVC模式中，經常會碰到

這樣的書寫方式。有很多人問我這是什麼意思，查API也找不到。網路上也找不到，其實看extjs3.x中查詢元件的方式，就會明白了。Refs是一個查詢並匹配元件的集合，集合裡面則指定了需要的操作，即查詢一個元件，而找到的這個元件所匹配元件就是selector指定的，用上面程式碼一條{ref: 'menu',selector: 'tablepanel'}來稍做解釋，即查詢menu元件（其實是一顆樹），點選樹節點，結果將在'tablepanel'中顯示。這樣解釋可能比較含糊，那麼就用官方例子做個解釋吧。{ref: 'feedData', selector: 'feedlist dataview'}。這條的含義是查詢'feedData'，將'feedData'顯示在'feedlist的子元件dataview'上。

總結下，就是在ExtJS4中所有的元件都有一個query方法，這個方法就是ComponentQuery的實現。當然，如果還是不明白的話，就可以使用：

Ext.ComponentQuery.query("tabpanel");

Ext.ComponentQuery.query("#mytree")

等等。實在extjs4.0實際使用過程中，如果要呼叫或查詢元件，exjts會自動呼叫ComponentQuery的query方法來查詢對應元件。

例子：