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。
下面我们来看他的用法。先看一段代码。
- Ext.require('Ext.*');
- Ext.onReady(function(){
- var win = Ext.create('Ext.window.Window',{
- height: 160,
- width: 280,
- title: '用户登陆',
- closeAction: 'hide',
- closable : false,
- iconCls: 'win',
- layout: 'fit',
- modal : true,
- plain : true,
- resizable: false,
- items:[{
- xtype:'form',
- items:[{
- //.....
- }],
- button:[{
- text:'登录',
- handler:function(){
- }
- }]
- }]
- })
- });
这段代码中，我们创建了一个window，然后在window中添加了一个form。最后增加了一个button。button的handler，我们定义了一个function。下一步，我们在这个function中添加代码。
- 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方法。我们将整个过程复杂化一些。
- 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进行数据保存的时候，我们会使用
- var win = button.up('window'),
- form = win.down('form'),
- record = form.getRecord(),
这类型的查找进行数据更新。
最后，在extjs4.0 MVC模式中，经常会碰到
- 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
- }
- })
- }
