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

柔情只为你懂 2022-09-20 12:47 158阅读 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 plain][] [copy][view plain]

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 plain][] [copy][view plain]

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 plain][] [copy][view plain]

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 plain][] [copy][view plain]

1.  // 通过ID获得组件:\#ID    
2.  //   var items = Ext.ComponentQuery.query('\#btn2',panel);

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

**\[javascript\]**  [view plain][] [copy][view plain]

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

3、 通过xtype："treepanel”或".treepanel

**\[javascript\]**  [view plain][] [copy][view plain]

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 plain][] [copy][view plain]

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 plain][] [copy][view plain]

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

这类型的查找进行数据更新。  
  
    最后，在extjs4.0 MVC模式中，经常会碰到

**\[javascript\]**  [view plain][] [copy][view plain]

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 plain][] [copy][view plain]

1.  Ext.ComponentQuery.query("tabpanel");  
2.    
3.  Ext.ComponentQuery.query("\#mytree");

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

**\[javascript\]**  [view plain][] [copy][view plain]

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

[view plain]: http://blog.csdn.net/q11253217/article/details/11563991#