[ExtJS5学习笔记]第三十五条 sencha extjs 5 组件查询方法

一UI前部组件势必更加,我们通常习惯性使用ID获取部件操作的需要。但是,这种方法是extjs推荐么?你有吗extjs利用它来获取组件的推荐方法?

  • 文件夹
    • extjs的查询组件的API
    • 查询实例
      • 主要的组件查询
      • 组件树查询
      • 通过组件的属性检索
      • 属性匹配操作符
      • 逻辑运算的
    • 官方案例

extjs的查询组件的API

组件查询API文档地址:5.1.0-apidocs/#!/api/Ext.ComponentQuery-method-query
能够看到是使用的Ext.ComponentQuery这个单例的query方法来进行查询的。

查询实例

主要的组件查询

  1. 查询xtype组件

    prevField = myField.previousNode('textfield');
    

    这表示查询全部 textfield 以及继承自TextField的组件都会被查询。

    prevTextField = myField.previousNode('textfield(true)');
    

    这表示仅仅查询TextField类的。其它继承类不用去查询。仅仅须要传入true表示严格查询就可以。

  2. ID或者ItemID查找

    #myContainer
    当须要查询ID定义的组件的时候。能够使用#来查询。

  3. xtype和ID或者ItemID组合使用

     panel#myPanel
    

    这样能够尽可能的降低ID带来的冲突,对xtype进行了一次过滤。

组件树查询

看以下一个查询实例:

window[title="Input form"] textfield[name=login] ^ form > button[action=submit]

语句从左到右运行,运行完毕一个,就依照当前找到的那个再接着往下运行。所以这句话的意思是:
找到标题为Iput form的window的叫做login的textfield的父窗口中button的提交名称为submit的那个按钮。

通过组件的属性检索

上述样例就能够看到 当查询title为Input form的window的时候就是使用的组件的属性。

属性匹配操作符

  1. =
    表示严格等于 。

  2. ~=
    表示仅仅要搜索到检索词就可以。
  3. ^=
    表示以什么什么 开头
  4. $=
    表示以什么什么结尾的
  5. /=
    表示支持正則表達式的

逻辑运算的

  1. and逻辑

    Ext.ComponentQuery.query('panel[cls~=my-cls][floating=true][title$="sales data"]');
    

这样的类型的是表示逻辑and

  1. or逻辑

    Ext.ComponentQuery.query('field[fieldLabel^=User], field[fieldLabel*=password]');
    

官方案例

    // retrieve all Ext.Panels in the document by xtypevar panelsArray = Ext.ComponentQuery.query('panel');// retrieve all Ext.Panels within the container with an id myCtvar panelsWithinmyCt = Ext.ComponentQuery.query('#myCt panel');// retrieve all direct children which are Ext.Panels within myCtvar directChildPanel = Ext.ComponentQuery.query('#myCt > panel');// retrieve all grids or treesvar gridsAndTrees = Ext.ComponentQuery.query('gridpanel, treepanel');// Focus first ComponentmyFormPanel.child(':focusable').focus();// Retrieve every odd text field in a formmyFormPanel.query('textfield:nth-child(odd)');// Retrieve every even field in a form, excluding hidden fieldsmyFormPanel.query('field:not(hiddenfield):nth-child(even)');

转载于:https://www.cnblogs.com/gcczhongduan/p/5047996.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/357873.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据湖 多维数据集_按汇总分组/多维数据集

数据湖 多维数据集时不时地,您会遇到一个使您达到SQL限制的要求。 我们中的许多人可能会早早放弃并使用Java / [或您的语言]计算内容。 相反,使用SQL可能是如此简单快捷。 如果您使用的是高级数据库,例如DB2 , Oracle &#xff0c…

【APICloud系列|22】 videoPlayer模块(视频播放)的实现

导读:videoPlayer 封装了视频播放功能(不支持音频播放)。可快进、快退设置播放位置等操作,亦可设置屏幕亮度和系统声音大小。通过监听接口可获取模块上的各种手势操作事件。 模块详情:http://www.apicloud.com/mod_detail/35792 index.html <html><head>&l…

mysql数据库突然连不上了_mysql数据库突然连接不上去

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里云数据库专家保驾护航&#xff0c;为用户…

FlexyPool如何同时支持连接代理和装饰器

代理人 FlexyPool监视连接池使用情况&#xff0c;因此需要拦截连接关闭方法调用。 为了简单起见&#xff0c;第一个版本为此目的依赖动态代理&#xff1a; private static class ConnectionInvocationHandler implements InvocationHandler {public static final String CLOS…

集合视图控制器(CollectionViewController) 、 标签控制器(TabBarController) 、 高级控件介绍...

1 创建集合视图&#xff0c;设置相关属性以满足要求 1.1 问题 集合视图控制器UIConllectionViewController是一个展示大量数据的控制器&#xff0c;系统默认管理着一个集合视图UICollectionView&#xff0c;功能几乎和UITableViewController差不多&#xff0c;能够以多行多列的…

【APICloud系列|23】 UIPullRefresh 模块(下拉刷新)的实现

导读:UIPullRefresh 模块对引擎新推出的下拉刷新接口进行了一层封装,App 可以通过此模块来实现带炫酷动画效果的下拉刷新功能。 使用了 window + frame 的布局,如果你只是使用在独立的 window 布局,那么就需要在 config.xml 中配置 <preference name="customRefres…

mysql迭代查询并分页_mysql 数据库 分页查询优化

举个栗子&#xff1a;表名&#xff1a;batch_big_num列名&#xff1a;id(主键)&#xff0c;name&#xff0c;age&#xff0c;product_name&#xff0c;product_num1&#xff0c;利用索引(1)加一个order by索引列 可以提升一定的效率select * from batch_big_num order by id …

【APICloud系列|24】 MNNavigationMenu模块(导航菜单)的实现

导读:MNNavigationMenu 是一个导航栏菜单,开发者可自定义其中的样式和按钮个数,超出屏幕部分可左右拖动查看。 模块详情:http://www.apicloud.com/mod_detail/12417 index.html <!doctype html> <html> <head><meta charset="utf-8">&…

mysql2教程_mySQL 教程 第2章 安装和介绍mySQL

设置mySQL字符集支持中文的字符集是utf8&#xff0c;该设置可以更改mySQL配置文件进行全局设置&#xff0c;也可以针对数据库设置&#xff0c;也可以针对表设置&#xff0c;也可以针对列设置。字符集更改后新插入的数据生效&#xff0c;对以前不生效。练习1&#xff1a;更改MyS…

java 更新订单状态_Java 8状态更新

java 更新订单状态即将到来的Java SE 8发行版的两大新语言功能是Lambda Expressions和Modularity。 这两天的状态更新都已经发布。 我会与您分享链接&#xff0c;因此您可能会在假期中通读它们 Oracle计划在2013年中期发布Java SE 8。 Lambda项目 Lambda项目以及JSR-335希望提…

有沃更精彩,沃课堂理想的移动学习平台

有沃更精彩。沃课堂&#xff0c;能够让你随时随地在你的手机上学习。在ipad上学习视频课程&#xff0c;能够在你闲暇时、等车时拿出你的pad,拿出你的手机来学习复习一段时间。让学习不在局限于互联网&#xff0c;局限于课堂上。 沃课堂。採用的是云server&#xff0c;全部的信息…

【APICloud系列|25】 easeChat模块(环信-即时通讯)的实现

导读&#xff1a;easeChat 模块封装了环信即时通讯云的开放SDK,封装的接口都是纯功能类接口&#xff0c; 主要分三大类&#xff1a; 1&#xff0c;注册、登录、退出、监听 2&#xff0c;创建群组、添加/删除好友、获取好友列表 3&#xff0c;消息、会话、聊天 功能详情参考模块…

mysql dump 10.13_mysqldump版本引起的问题

mysqldump5.1版本mysqldump --versionmysqldump Ver 10.13 Distrib 5.1.73, for redhat-linux-gnu (x86_64)mysqldump --help | grep gtid没有内容mysql5.6版本mysqldump --versionmysqldump Ver 10.13 Distrib 5.6.25, for Linux (x86_64)mysqldump --help | grep gtid--set…

基于JBoss Fuse 6.2的JBoss BPM微服务集成指南

今年年初&#xff0c;我们宣布了JBoss BPM Suite令人兴奋的示例项目&#xff0c;该项目围绕一个正在运行的在线Travel Agency项目展开。 最初是利用Web服务&#xff0c;后来我们在JBoss Fuse的帮助下迁移到微服务 。 随着JBoss Fuse 6.2的发布&#xff0c;我们希望重新访问该…

【APICloud系列|26】UIScrollPicture 模块(图片轮播)的实现

导读:UIScrollPicture 模块是一个图片轮播模块,只需传入一组图片地址,即可实现图片轮播效果。同时演示了如何使用UIScrollPicture实现APP引导页功能 使用模块前需在控制台添加UIScrollPicture模块和UIButton模块。 使用UIScrollPicture创建引导页方法1:点击引导页最后一个页…

mysql zip 还原_mysql 压缩还原数据库

MySQL数据库备份和还原的常用命令其实很多情况下mysql备份就是采用了这些命令&#xff0c;例如&#xff1a;mysql导入和导出数据linux自动定时备份web程序和mysql数据库备份MySQL数据库的命令mysqldump -hhostname -uusername -ppassword databasename > backup...文章无声胜…

jvm调试工具_调试JVM

jvm调试工具在某些&#xff08;极少数&#xff09;情况下&#xff0c;您可能会遇到使JVM本身崩溃的情况。 我最近通过将ThreadGroup的名称设置为null来进行管理 。 在这些情况下&#xff0c;调试JVM本身很有用&#xff0c;这样可以更精确地定位崩溃。 这是执行此操作的步骤&…

遮罩窗体弹出登录页面代码实现

先上效果图(本人喜欢胡巴&#xff0c;背景用了胡巴)&#xff0c;鼠标滑过页面&#xff0c;图片变暗&#xff0c;透明度为0.4&#xff0c;同时弹出登录窗口。 接下来先看css代码(写的可能不是很规范&#xff0c;根据调整样式顺序写的) body{background-color: black;width: 100%…

【APICloud系列|27】 UICalendar模块(日历)的实现

导读:UICalendar 是一个日历选择模块;可自定义日历的样式,添加特殊日期标注,切换月份,设置指定日期;用于实现常用的日期选择,日历展示功能 模块地址 UICalendar 是一个日历选择模块;可自定义日历的样式,添加特殊日期标注,切换月份,设置指定日期;用于实现常用的日期…

jsp页面页面post传值_在Js页面通过POST传递参数跳转到新页面详解

场景最近在工作中遇到一个需求&#xff0c;有个页面 a.vm&#xff0c;对 ajax 请求的结果进行判断后&#xff0c;获取结果里面的数据传递给一个 URL(b.htm)&#xff0c;跳转到新的页面 b.htm。遇到的问题因为一开始是 GET 请求&#xff0c;所以当传递的数据过大的时候&#xff…