Extjs4---ComponentQuery

对于Extjs3.x来说,Extjs4.0组件查找使用了ComponentQuery类，这个类是用来查找容器内的组件的。实现方式类似于CSS的Selector。

对于Extjs3.x来说,Extjs4.0组件查找使用了ComponentQuery类，这个类是用来查找容器内的组件的。实现方式类似于CSS的Selector。在extjs3.x中，查找组件的方式有很多，例如：（ID组件ID）、(ref组件引用)、（items.get(0)组件的层级）。在extjs4.0中，则多了ComponentQuery。利用这个类，将更加方便的查找组件。下面，则是将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.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(),

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

最后，在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. ]

这样的书写方式。有很多人问我这是什么意思，查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. }