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'