Sencha Touch组件选择器

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

get方法:

  1. get( String id  : Object 

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

参数

  1. l id : String 

组件的id

返回值

  1. l Object 

组件实例,或者unfined。   

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

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

获取一个组件集合。

参数

  1. l selector : String 

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

  1. l root : Ext.Container(可选) 

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

返回值

  1. l Ext.Component[] 

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

各种类型的选择器

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

ID选择器

根据组件id来选择组件,具有***性。前面以”#”号来标志:

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

 

类别选择器

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

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

属性选择器

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

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

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

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

后代选择器

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

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

子选择器

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

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

 

 

责任编辑:佚名 来源: 移动web开发社区
相关推荐

2011-09-02 15:18:49

Sencha Touc

2011-10-26 10:21:40

Sencha Touc组件

2011-07-25 15:55:21

Sencha ToucHtml 5

2011-07-26 09:41:50

Sencha Touc特性HTML 5

2010-11-22 10:31:17

Sencha touc

2011-07-26 09:46:53

Sencha Touc

2011-07-25 16:21:22

Sencha touc

2011-09-05 10:20:21

Sencha ToucAPP

2011-07-25 16:41:16

Sencha Touc

2011-09-05 10:39:03

Sencha Touc离线存储数据库

2011-09-05 13:58:29

Sencha Touc控件

2011-09-02 16:21:08

Sencha Touc自动生成工具

2011-09-02 17:11:45

Android应用iPhone应用sencha

2011-09-05 12:49:59

Sencha Touc事件

2011-09-05 11:23:26

EclipseSencha Touc框架

2011-09-02 15:12:29

PhoneGapSencha Touc

2012-03-08 22:31:28

Sencha Touc

2011-09-05 14:09:06

Sencha Touc函数

2011-09-05 13:53:08

Sencha Touc列表

2011-09-05 11:27:17

Sencha Touc框架HTML5
点赞
收藏

51CTO技术栈公众号