Extjs4 up 和down的用法

Extjs4.x中，每個組件都新增加了兩個方法up()和down()方法。這兩個方法都是用來獲取組件的，下面我們來看下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(){

     }
    }]
   }]
  })
 });

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();

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();

var form = this.up(‘window’).down(‘form’).getForm();

相信大家已經很明白了,this.up(‘window’)獲取了頂級的window組件。接着使用down()方法獲取了window的子組件form組件，最后使用getForm()來獲取整個form。

結語：在extjs4中，extjs給每個組件增加了up()和down()方法，這樣使得我們更加容易得到每個組件的父級組件和子級組件。當然，除了這些方法，extjs還增加了更加強大的ComponentQuery類，通過這個類，我們可以使用更多的方法來找到所需要的任何組件。具體ComponentQuery的用法

來源： <http://blog.csdn.net/li_xiao_ming/article/details/7063610>

 

來自為知筆記(Wiz)