Extjs4中up()和down()的用法
Extjs4.x中，新增加了兩個方法up()和down()方法。這兩個方法都是用來獲取組件的，下面我們來看下官方解釋。
up( String selector, [Number/Mixed maxDepth] ) : Ext.core.Element
selector:必選，字符串形式，表示要匹配的組件。
Maxdepth:可選，表示要匹配的最大深度。
up方法的API解釋爲：通過簡單的選擇，獲得相匹配的dom，使用up方法總是返回一個Ext.core.Element，也就是ext的組件。
down( String selector, [Boolean returnDom] ) : HTMLElement/Ext.core.Element
selector:必選，字符串形式，表示要匹配的組件，
returnDom：可選，布爾類型，如果爲true，則返回DOM節點，而不是Ext.core.Element。值默認爲false。
down方法的API解釋，通過選擇器,來獲得任何深度的子組件，在down方法中，不應該包含組件的id，而應該是組件的xtype。
下面我們來看他的用法。先看一段代碼。
- Ext.require('Ext.*');
- Ext.onReady(function(){
- var win = Ext.create('Ext.window.Window',{
- height: 160,
- width: 280,
- title: '用戶登陸',
- closeAction: 'hide',
- closable : false,
- iconCls: 'win',
- layout: 'fit',
- modal : true,
- plain : true,
- resizable: false,
- items:[{
- xtype:'form',
- items:[{
- //.....
- }],
- button:[{
- text:'登錄',
- handler:function(){
- }
- }]
- }]
- })
- });
這段代碼中，我們創建了一個window，然後在window中添加了一個form。最後增加了一個button。button的handler，我們定義了一個function。下一步，我們在這個function中添加代碼。
- var form = this.up(‘form’).getForm();
這裏用到了this.up。具體解釋下。這裏this。就是button組件，up(‘form’)是指匹配form組件。那麼合起來，我們就得到了form組件，並且得到整個form。
在這個例子中，我們並不需要down方法。因爲無論是獲取form還是window.我們都可以使用this.up(‘form’)或this.up(‘window’)來獲取form組件和window組件。
爲了介紹下down方法。我們將整個過程複雜化一些。
- var form = this.up(‘window’).down(‘form’).getForm();
相信大家已經很明白了,this.up(‘window’)獲取了頂級的window組件。接着使用down()方法獲取了window的子組件form組件，最後使用getForm()來獲取整個form。
組件查找_ComponentQuery類
Extjs4.0組件查找使用了ComponentQuery類，使用這個類能更加方便地查找容器內的組件。實現方式類似於CSS的Selector。
下面將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.x：
在Extjs4.0中，依然可以沿用Extjs3.x中查找組件的方式，但是在Extjs4.0中，可以利用ComponentQuery，更方便找到對應組件。
1、 通過組件ID獲取組件："#組件ID”，如果通過這種方式，那麼一定要記住在組件ID前添加#號。
- // 通過ID獲得組件:#ID
- // var items = Ext.ComponentQuery.query('#btn2',panel);
2、 得到某一組件下所有的指定類型的組件："panel>button”，這種方式是查找所有panel組件下的所有button組件。
- // 獲得panel下的所有button,這個需要注意，button必須在panel下的第一層，如果中間跨層是找不到的，如：'viewport>button'是找不到button的，因爲中間有一層panel
- // var items = Ext.ComponentQuery.query('panel>button',panel);
3、 通過xtype："treepanel”或".treepanel
- // 如果是多個類別，可以逗號隔開，如：'gridpanel,treepanel'
- var items = Ext.ComponentQuery.query('button',panel);
- // 通過組件的屬性來查找
- // var items = Ext.ComponentQuery.query('button[id=btn2]',panel);
5、還有兩種方式，是查找某一組件的子組件或上級組件，例如：
1、查找window下的form：win.down(“form”)
2、查找button的父組件window:button.up(“window”);
最明顯的例子就是在extjs4.0使用MVC模式進行開發的時候，經常會在control控制中大量使用'viewport > panel'，’edit button[action=save]’這類查找，當點擊button進行數據保存的時候，會使用
- var win = button.up('window'),
- form = win.down('form'),
- record = form.getRecord(),
最後，在extjs4.0 MVC模式中，經常會碰到
- refs:[
- {ref: 'menu',selector: 'tablepanel'},
- {ref: 'feedList', selector: 'feedlist'},
- {
- ref: 'feedWindow',
- selector: 'feedwindow',
- autoCreate: true,
- xtype: 'feedwindow'
- }
- ]
這樣的書寫方式。有很多人問我這是什麼意思，查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方法來查找對應組件。
例子：
- init:function(){
- this.control({
- 'smsmenu': {//這裏不必寫全部的代碼Ext.ComponentQuery.query(…);
- itemmousedown: this.loadMenu
- }
- })