ExtJS4中查找组件的方法

  1.  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。

下面我们来看他的用法。先看一段代码。

  1. Ext.require('Ext.*');
  2. Ext.onReady(function(){
  3. var win = Ext.create('Ext.window.Window',{
  4. height: 160,
  5. width: 280,
  6. title: '用户登陆',
  7. closeAction: 'hide',
  8. closable : false,
  9. iconCls: 'win',
  10. layout: 'fit',
  11. modal : true,
  12. plain : true,
  13. resizable: false,
  14. items:[{
  15. xtype:'form',
  16. items:[{
  17. //.....
  18. }],
  19. button:[{
  20. text:'登录',
  21. handler:function(){
  22. }
  23. }]
  24. }]
  25. })
  26. });

这段代码中,我们创建了一个window,然后在window中添加了一个form。最后增加了一个button。button的handler,我们定义了一个function。下一步,我们在这个function中添加代码。

  1. 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方法。我们将整个过程复杂化一些。

  1. 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()方法,这样使得我们更加容易得到每个组件的父级组件和子级组件。

2. ComponentQuery类

在extjs4.0中,则多了ComponentQuery。利用这个类,将更加方便的查找组件。

        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]这样的方式,就会出现问题,因为在某一层级上,出项了两个相同的组件。

        Extjs4.x: 
 

在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进行数据保存的时候,我们会使用

  1. var win = button.up('window'),
  2. form = win.down('form'),
  3. record = form.getRecord(),
var win   = button.up('window'),    form   = win.down('form'),  record = form.getRecord(),

这类型的查找进行数据更新。

最后,在extjs4.0 MVC模式中,经常会碰到

  1. refs:[
  2. {ref: 'menu',selector: 'tablepanel'},
  3. {ref: 'feedList', selector: 'feedlist'},
  4. {
  5. ref: 'feedWindow',
  6. selector: 'feedwindow',
  7. autoCreate: true,
  8. xtype: 'feedwindow'
  9. }
  10. ]
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方法来查找对应组件。

例子:

  1. init:function(){
  2. this.control({
  3. 'smsmenu': {//这里不必写全部的代码Ext.ComponentQuery.query(…);
  4. itemmousedown: this.loadMenu
  5. }
  6. })
  7. }

 

你可能感兴趣的:(extjs4)