Extjs学习（三）组件查找 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]这样的方式，就会出现问题，因为在某一层级上，出项了两个相同的组件。

items.get(0)：这种方式是通过首先获得组件中所有元素的数组，然后通过数组获得想要的组件对象，一般不会用到，因为非常不灵活，如果元素层级发生改变的话，将不能获取想要的组件，维护起来也非常困难。所以，这种方式，是用的最少的一种方式。

Extjs4.x：

在Extjs4.0中，依然可以沿用Extjs3.x中查找组件的方式，但是在Extjs4.0中，可以利用ComponentQuery，更方便找到对应组件。

1、 通过组件ID获取组件："#组件ID”，如果通过这种方式，那么一定要记住在组件ID前添加#号。

[javascript] view plaincopyprint?

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

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

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

[javascript] view plaincopyprint?

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

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

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

[javascript] view plaincopyprint?

1. // 如果是多个类别，可以逗号隔开，如：‘gridpanel,treepanel‘   
2. var items = Ext.ComponentQuery.query(‘button‘,panel);  

  	// 如果是多个类别，可以逗号隔开，如：'gridpanel,treepanel'
// var items = Ext.ComponentQuery.query('button',panel);

4、如果想获取所有button并且action为save的button，则可以使用"button[action=save] "，又或者获取所有panel，并且autoscroll属性为true的panel，则可以使用"panel[autoScroll=true]"

[javascript] view plaincopyprint?

1. // 通过组件的属性来查找   
2. //   var items = Ext.ComponentQuery.query(‘button[id=btn2]‘,panel);  

  // 通过组件的属性来查找
  //   var items = Ext.ComponentQuery.query('button[id=btn2]',panel);

note:通过属性查找的时候中括号要紧挨着类名，如上据代码button和[id=btn1]之间不能有空格！

5、还有两种方式，是查找某一组件的子组件或上级组件，例如：

[javascript] view plaincopyprint?

1. 　　1、查找window下的form：win.down(“form”)  
2. 　　2、查找button的父组件window:button.up(“window”);  

　　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 plaincopyprint?

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模式中，经常会碰到

[javascript] view plaincopyprint?

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方法来查找对应组件。

例子：

init:function(){

    this.control({

        ‘smsmenu‘: {//这里不必写全部的代码Ext.ComponentQuery.query(…);

             itemmousedown: this.loadMenu

        }

    })

}