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。

下面我們來看他的用法。先看一段代碼。

[javascript]?view plaincopy

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中添加代碼。

[javascript]?view plaincopy

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方法。我們將整個過程復雜化一些。

[javascript]?view plaincopy

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前添加#號。

[javascript]?view plaincopy

//?通過ID獲得組件:#ID????

//???var?items?=?Ext.ComponentQuery.query('#btn2',panel);????

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

[javascript]?view plaincopy

//?獲得panel下的所有button,這個需要注意，button必須在panel下的第一層，如果中間跨層是找不到的，如：'viewport>button'是找不到button的，因為中間有一層panel????

//???var?items?=?Ext.ComponentQuery.query('panel>button',panel);????

??? 3、 通過xtype："treepanel”或".treepanel
[javascript]?view plaincopy

//?如果是多個類別，可以逗號隔開，如：'gridpanel,treepanel'????

???????var?items?=?Ext.ComponentQuery.query('button',panel);????

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

//?通過組件的屬性來查找????

?//???var?items?=?Ext.ComponentQuery.query('button[id=btn2]',panel);????

??????? note:通過屬性查找的時候中括號要緊挨著類名，如上據代碼button和[id=btn1]之間不能有空格！

??? 5、還有兩種方式，是查找某一組件的子組件或上級組件，例如：

??????????? 1、查找window下的form：win.down(“form”) ?
??????????? 2、查找button的父組件window:button.up(“window”); ?

??? 最明顯的例子就是在extjs4.0使用MVC模式進行開發的時候，經常會在control控制中大量使用'viewport > panel'，’edit button[action=save]’這類查找，當點擊button進行數據保存的時候，會使用
[javascript]?view plaincopy

var?win???=?button.up('window'),??????

?form???=?win.down('form'),?????

record?=?form.getRecord(),????

??? 這類型的查找進行數據更新。

??? 最后，在extjs4.0 MVC模式中，經常會碰到
[javascript]?view plaincopy

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的實現。當然，如果還是不明白的話，就可以使用：
[javascript]?view plaincopy

Ext.ComponentQuery.query("tabpanel");??

??

Ext.ComponentQuery.query("#mytree");??

??? 實在extjs4.0實際使用過程中，如果要調用或查找組件，exjts會自動調用ComponentQuery的query方法來查找對應組件。

??? 例子：
[javascript]?view plaincopy

init:function(){??

??

????this.control({??

??

????????'smsmenu':?{//這里不必寫全部的代碼Ext.ComponentQuery.query(…);??

??

?????????????itemmousedown:?this.loadMenu??

??

????????}??

??

????})??

總結

以上是生活随笔為你收集整理的Extjs4中up()和down()的用法以及组件查找_ComponentQuery类的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。