关闭

Extjs4中up()和down()的用法以及组件查找_ComponentQuery类

标签: extjs
11646人阅读 评论(0) 收藏 举报
分类:


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
  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.   })   
  27.  });  

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

[javascript] view plaincopy
  1. 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
  1. 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
  1. // 通过ID获得组件:#ID    
  2. //   var items = Ext.ComponentQuery.query('#btn2',panel);    

    2、 得到某一组件下所有的指定类型的组件:"panel>button”,这种方式是查找所有panel组件下的所有button组件。

[javascript] view plaincopy
  1. // 获得panel下的所有button,这个需要注意,button必须在panel下的第一层,如果中间跨层是找不到的,如:'viewport>button'是找不到button的,因为中间有一层panel    
  2. //   var items = Ext.ComponentQuery.query('panel>button',panel);    

    3、 通过xtype:"treepanel”或".treepanel
[javascript] view plaincopy
  1. // 如果是多个类别,可以逗号隔开,如:'gridpanel,treepanel'    
  2.        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
  1. // 通过组件的属性来查找    
  2.  //   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
  1. var win   = button.up('window'),      
  2.  form   = win.down('form'),     
  3. record = form.getRecord(),    
    这类型的查找进行数据更新。

    最后,在extjs4.0 MVC模式中,经常会碰到
[javascript] view plaincopy
  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. ]    

    这样的书写方式。有很多人问我这是什么意思,查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
  1. Ext.ComponentQuery.query("tabpanel");  
  2.   
  3. Ext.ComponentQuery.query("#mytree");  

    实在extjs4.0实际使用过程中,如果要调用或查找组件,exjts会自动调用ComponentQuery的query方法来查找对应组件。

    例子:
[javascript] view plaincopy
  1. init:function(){  
  2.   
  3.     this.control({  
  4.   
  5.         'smsmenu': {//这里不必写全部的代码Ext.ComponentQuery.query(…);  
  6.   
  7.              itemmousedown: this.loadMenu  
  8.   
  9.         }  
  10.   
  11.     })  
0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

Extjs4中up()和down()的用法

Extjs4.x中,每个组件都新增加了两个方法up()和down()方法。这两个方法都是用来获取组件的,下面我们来看下up()方法和down()方法的官方解释。 Extjs4.x中,新增加了两个...
  • li_xiao_ming
  • li_xiao_ming
  • 2011-12-12 15:01
  • 24388

Extjs4中up()和down()的用法

Extjs4.x中,每个组件都新增加了两个方法up()和down()方法。这两个方法都是用来获取组件的,下面我们来看下up()方法和down()方法的官方解释。 Extjs4.x中,新增加了...
  • p656456564545
  • p656456564545
  • 2015-09-16 15:01
  • 467

Extjs 组件查找

1. 全局查找方式 2. 容器内查找 3. form查找子组件 4. 通用组件查找方式1、全局查找方式
  • LilyXFan
  • LilyXFan
  • 2017-05-07 17:13
  • 334

Extjs4中的ComponentQuery

要注意和DomQuery区分开 用来找特点的所有容器(Ext.container.Container)或是通过Ext.ComponentManager找特定的所有组件 1.当找组件...
  • gtchenxw
  • gtchenxw
  • 2012-04-19 18:01
  • 3210

Extjs4.2 选择器 Ext.ComponentQuery.query

基于xtype查找组件: var panels = Ext.ComponentQuery.query('panel');查找二级xtype:var buttons = Ext.ComponentQue...
  • HyEidolon
  • HyEidolon
  • 2014-08-22 17:21
  • 7695

一个简单的ExtJS搜索建议框

搜索建议的Combo.基本上完全兼容, 使用方式与Combo下拉框一样. 需要后台程序根据keyword进行搜索建议.
  • renfufei
  • renfufei
  • 2015-08-21 13:12
  • 2749

Extjs4中如何获取组件(通过ID或通过Name)

Extjs4中如何获取组件(通过ID或通过Name) 通过Id方式:Ext.getCmp('my_form'); 通过组件名称: this.up('form').getForm();//获取...
  • jcy472578
  • jcy472578
  • 2013-11-27 11:07
  • 4814

Extjs鼠标长按事件(实现长按按钮触发事件的方法:mousedown、mouseup)

实现效果: 注:实现的效果其实就是监听鼠标长按的事件,当鼠标左击长按改变按钮的样式,当鼠标放开之后还原按钮的样式。 实现方法: extjs: Ext.get("...
  • fifteen718
  • fifteen718
  • 2016-11-29 11:05
  • 1404

Extjs4.x中,每个组件都新增加了两个方法up()和down()方法

Extjs4.x中,每个组件都新增加了两个方法up()和down()方法。这两个方法都是用来获取组件的,下面我们来看下up()方法和down()方法的官方解释。 Extjs4.x中,新增加了...
  • u014236541
  • u014236541
  • 2016-08-04 12:57
  • 367

Linux系统网络设备启动和禁止“ifconfig eth0 up/down”命令的跟踪

前面文章讲了Linux系统的ethtool框架的一些东西,是从用户空间可以直观认识到的地方入手。同样,本文从Linux系统绝大部分人都熟悉的“ifconfig eth0 up”命令来跟踪一下此命令在内...
  • subfate
  • subfate
  • 2015-03-30 22:02
  • 7055
    欢迎光临!