Sencha Touch之组件选择器

    在开发的过程中，经常会碰到需要调用已创建的组件的情况。一般情况下，可以用Ext.getCmp()方法达到这一目的。这个方法是Ext.ComponentManager的get方法的快捷方式，调用Ext.getCmp()方法实际就是间接调用了Ext.ComponentManager.get()方法。

get方法：

 
 
get( String id  : Object 

通过id获取一个组件实例。

参数

 
 
l id : String 

组件的id

返回值

 
 
l Object 

组件实例，或者unfined。   

但是上述方法，只能实现获取一个组件的目的，如果你想要获取一个类型的所有组件集合、具有某些特点的组件集合，Ext.ComponentManager.get()就无能为力了。Sencha Touch中怎么做到这一点？这就是本篇存在的目的了。来，用组件选择器吧，它的query方法能让你轻松地实现这一目标。下面让我们来认识一下它：

 
 
query( String selector, Ext.Container root  : Ext.Component[] 

获取一个组件集合。

参数

 
 
l selector : String 

一个字符串形式的选择器。

 
 
l root : Ext.Container(可选) 

一个容器组件或一个容器组件集，搜索范围将被限定在这些容器里面。

返回值

 
 
l Ext.Component[] 

符合条件的组件集，或者一个空集合。   

各种类型的选择器

如果你学过css的选择器，那么肯定会对以下内容十分熟悉。

ID选择器

根据组件id来选择组件，具有唯一性。前面以”#”号来标志：

 
 
//返回itemid或者id为“panel”的组件实例 
var panel = Ext.ComponentQuery.query('#panel'); 

类别选择器

类选择器根据类的xtype来选择，可选择前面是否以”.”来标志，如：

 
 
//根据xtype返回所有Ext.List实例 
var lists = Ext.ComponentQuery.query('list'); 
var lists2 = Ext.ComponentQuery.query('.list'); 

属性选择器

根据组件的属性来选择，可以选择具有某个属性的组件，或者属性为特定值的组件。

 
 
//返回具有iconCls属性的Ext.Button的实例 
var btnOk= Ext.ComponentQuery.query('button[iconCls]'); 

也可以选择某个属性为特定值的组件

 
 
//返回text属性为“ok”的Ext.Button的实例 
var btnOk= Ext.ComponentQuery.query('button[text = "ok"]'); 

后代选择器

后代选择器也称为包含选择器，用来选择特定容器或容器组的后代，后代选择器由两个常用选择器，中间加一个空格表示。其中前面的选择器选择父组件，后面的选择器选择后代组件。

 
 
//返回所有id为“myCt”的容器中Ext.Panel实例 
var panelsWithinmyCt = Ext.ComponentQuery.query('#myCt panel'); 

子选择器

请注意这个选择器与后代选择器的区别，子选择器（child selector）仅是指它的直接后代，而后代选择器是作用于所有子后代组件。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择，我们看下面的代码：

 
 
//返回所有id为“myCt”的容器的子组件中的Ext.Panel实例 
var directChildPanel = Ext.ComponentQuery.query('#myCt > panel'