免责声明:
    本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除。
    原文作者:威老
    原文地址:http://www.cnblogs.com/weilao/archive/2011/11/26/2264310.html

在开发的过程中,经常会碰到需要调用刚才创建的组件的情况。一般情况下,可以用Ext.getCmp()方法达到这一目的。这个方法是Ext.ComponentManager的get方法的快捷方式,调用Ext.getCmp()方法其实就是间接调用了Ext.ComponentManager.get()方法。get方法的文档介绍如下:

get( String id ) : Object

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

参数

id : String

组件的id

返回值

Object

组件实例,或者unfined。

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

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

获取一个组件集合。

参数

selector : String

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

root : Ext.Container(可选)

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

返回值

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');
群组选择器

当几个组件样式属性一样时,可以共同调用一个声明,组件之间用逗号分隔。如:

//返回全局范围内所有的按钮和工具条
var gridsAndTrees = Ext.ComponentQuery.query('button, toolbar');
自定义选择器

Sencha Touch中允许你定义自己的筛选逻辑。

//定义一个筛选的方法
Ext.ComponentQuery.pseudos.invalid = function(items){ var i = 0, l = items.length, c, result = [];
for (; i < l; i++) {
if (!(c = items[i]).isValid()) {
result.push(c);
}
} //返回符合条件的组件集合
return result; }; //使用前面构造的方法进行查询
var invalidFields = Ext.ComponentQuery.query('field:invalid', myFormPanel);

在容器中查询

query方法查询过程中,默认会遍历所有组件。显然这个是十分影响效率的,把搜索范围限定起来,能使查询速度大大提高。还记得query方法的第二个参数吗?我们这样做:

var btnRefresh = Ext.ComponentQuery.query('#btnRefresh', container);

另一种方式个人比较推荐,因为它看起来特别地干净利落:

var btnRefresh = container.query('#btnRefresh');

说到这里,就不能不提提Container类中用于查询组件的几个方法了。Container中的query方法、down方法、child方法和up方法,都是基于组件选择器而实现的组件查询方法,调用这些方法,可以很轻松地获取想要的组件。这里用一张表格列出这些方法的区别:

【转载】Sencha Touch 提高篇 组件选择器的更多相关文章

  1. sencha touch 扩展篇之使用sass自定义主题样式 (下)通过css修改官方组件样式以及自定义图标

    上一讲我们讲解了如何使用官方的api来修改主题样式,这讲我们继续讲解sass的样式修改, 编译官方自带的主题包  在生成的项目以及官方sdk的目录下,自带了一些主题sass包,我们也可以通过修改sas ...

  2. sencha touch 扩展篇之使用sass自定义主题样式 (上)使用官方的api修改主题样式

    大家知道,sencha touch是通过我们写的js代码来动态渲染单页面生成一个个div+css的html页面来模拟app应用,那么既然是div+css结构的,我们就可以通过修改css样式来自定义我们 ...

  3. sencha touch 扩展篇之将sencha touch打包成安装程序(下)- 使用phonegap打包安装程序

        这讲我们来讲解下如何使用phonegapa创建项目环境并通过她们将sencha touch打包成app,这里我们只讲解打包android的apk,打包ios的过程有点类似,但是需要在mac环境 ...

  4. sencha touch 扩展篇之将sencha touch打包成安装程序(上)- 使用sencha cmd打包安装程序

    由于最近一直忙着android原生的开发,很久没有更新博客了,官方的sencha cmd工具功能非常强大,创建项目,压缩项目,打包安装程序都能轻松实现,这讲我们就给大家介绍下如何使用sencha cm ...

  5. (转载)java提高篇(五)-----抽象类与接口

    接口和内部类为我们提供了一种将接口与实现分离的更加结构化的方法. 本文是转载的(尊重原著),原文地址:http://www.cnblogs.com/chenssy/p/3376708.html 抽象类 ...

  6. sencha touch(7)——list组件

    1.list组件是一个很强大的组件.用于以一览表的形式或者列表的形式展示应用程序中的大量的数据.该组件使用XTemplate模版来显示数据,同时与数据仓库进行绑定.所以当数据仓库中的数据发生变化的时候 ...

  7. 【翻译】在Ext JS和Sencha Touch中创建自己定义布局

    原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...

  8. html5外包—长年承接html5外包业务:《Sencha Touch权威指南》下载

    <Sencha Touch权威指南>内容简介:如何才能全面而透彻地理解和掌握移动应用开发框架Sencha Touch并开发出令人心动的移动应用?<Sencha Touch权威指南&g ...

  9. sencha touch 组件选择器getCmp和ComponentQuery.query()的效率解析

    昨天无意中在网上看到一篇讲解sencha touch组件选择器的文章,名为 Sencha touch 2通过Ext.ComponentQuery.query查找组件. 里面对组件选择器的效率讲解完全反 ...

随机推荐

  1. 设置peoplecode trace

    Configuring PeopleCode Trace Select PeopleTools, Utilities, Debug, Trace PeopleCode to access the Tr ...

  2. [leetcode]_Longest Common Prefix

    问题:寻找最长公共前缀 思路:就是逐一检查每个string中的每一位,碰到不相等的时候,结束:每个string中这一位都相等,加入到common prefix中~ public String long ...

  3. wcf调用oracle存储过程

    public IList<ACCP_RAIN> QueryAll(string beginTime, string endTime, string type) { beginTime = ...

  4. PHP生成二维码库phpqrcode

    Description PHP QR Code is open source (LGPL) library for generating QR Code, 2-dimensional barcode. ...

  5. JS预览图像

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  6. 获取android SDCard存储大小

    //File path = Environment.getDataDirectory();//手机内置空间 1.获取SD卡的路径 File path = Environment.getExternal ...

  7. 计算两条直线的交点(C#)

    PS:从其他地方看到的源码是有问题的.下面是修正后的 /// <summary> /// 计算两条直线的交点 /// </summary> /// <param name ...

  8. 分布式缓存Memcached

       分布式缓存服务器,既然用到数据缓存很明显就是想高效性的获取数据,大容量的存储数据.为了可以缓存大量的数据以及可以高效获取数据,那么分布式缓存数据库就要解决数据可以水平线性扩展,这样可以扩大数据容 ...

  9. boa介绍文档

    http://wenku.baidu.com/view/873aa903cc175527072208ce.html?re=view

  10. node.js的学习

    require('http') 内置模块 server.js var http = require('http'); function start(){ server = http.createSer ...