[ExtJS5学习笔记]第三十五节 sencha extjs 5 组件查询方法总结
来源:互联网 发布:手机淘宝店铺发货流程 编辑:程序博客网 时间:2024/06/06 08:52
一个UI前台组件肯定会比较多,我们通常习惯性的使用ID来获取需要操作的组件,但是这种方法是extjs推荐的么?有没有extjs推荐使用的获取组件的方法呢?
目录
- 目录
- extjs的查询组件的API
- 查询实例
- 基本的组件查询
- 组件树查询
- 通过组件的属性检索
- 属性匹配操作符
- 逻辑运算的
- 官方案例
extjs的查询组件的API
组件查询API文档地址:5.1.0-apidocs/#!/api/Ext.ComponentQuery-method-query
可以看到是使用的Ext.ComponentQuery这个单例的query方法来进行查询的。
查询实例
基本的组件查询
查询xtype组件
prevField = myField.previousNode('textfield');
这表示查询所有 textfield 以及继承自TextField的组件都会被查询。
prevTextField = myField.previousNode('textfield(true)');
这表示只查询TextField类的,其他继承类不用去查询,只需要传入true表示严格查询即可。
ID或者ItemID查找
#myContainer
当需要查询ID定义的组件的时候,可以使用#来查询。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的时候就是使用的组件的属性。
属性匹配操作符
- =
表示严格等于 。 - ~=
表示只要搜索到检索词即可。 - ^=
表示以什么什么 开头 - $=
表示以什么什么结尾的 - /=
表示支持正则表达式的
逻辑运算的
and逻辑
Ext.ComponentQuery.query('panel[cls~=my-cls][floating=true][title$="sales data"]');
这种类型的是表示逻辑and
or逻辑
Ext.ComponentQuery.query('field[fieldLabel^=User], field[fieldLabel*=password]');
官方案例
// retrieve all Ext.Panels in the document by xtype var panelsArray = Ext.ComponentQuery.query('panel'); // retrieve all Ext.Panels within the container with an id myCt var panelsWithinmyCt = Ext.ComponentQuery.query('#myCt panel'); // retrieve all direct children which are Ext.Panels within myCt var directChildPanel = Ext.ComponentQuery.query('#myCt > panel'); // retrieve all grids or trees var gridsAndTrees = Ext.ComponentQuery.query('gridpanel, treepanel'); // Focus first Component myFormPanel.child(':focusable').focus(); // Retrieve every odd text field in a form myFormPanel.query('textfield:nth-child(odd)'); // Retrieve every even field in a form, excluding hidden fields myFormPanel.query('field:not(hiddenfield):nth-child(even)');
0 0
- [ExtJS5学习笔记]第三十五节 sencha extjs 5 组件查询方法总结
- [ExtJS5学习笔记]第三十节 sencha extjs 5表格gridpanel分组汇总
- [ExtJS5学习笔记]第三十三节 sencha extjs 5 grid表格导出excel
- [ExtJS5学习笔记]第三十一节 sencha extjs 5使用cmd生成的工程部署到tomcat服务器
- [ExtJS5学习笔记]第三十二节 sencha extjs 5与struts2的ajax交互配置
- [ExtJS5学习笔记]第三十四节 sencha extjs 5 grid表格之java后台导出excel
- [extjs5学习笔记]第三十八节 sencha CMD 6.0.0.220版本安装
- [EXTJS5学习笔记]第二十六节 在eclipse/myeclipse中使用sencha extjs的插件
- php学习 第三十五节
- [ExtJS5学习笔记]第七节 Extjs5的组件components及其模板事件方法学习
- [ExtJS5学习笔记]第二十节 Extjs5配合数组的push方法,动态创建并加载组件
- [ExtJS5学习笔记]第二十八节 sencha ext js 5.1.0发布版本正式发布 extjs doc下载地址
- [ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用增加字体图标
- [ExtJS5学习笔记]第十五节 Extjs5表格显示不友好?panel的frame属性在作怪
- [ExtJS5学习笔记]第二十五节 利用window.open()函数实现ExtJS5的登陆页面跳转
- [EXtJS5学习笔记]第一节 Sencha Cmd 学习笔记 简介 Sencha Cmd是什么
- [ExtJS5学习笔记]第二节 Sencha Cmd 学习笔记 使你的sencha cmd跑起来
- ExtJS5学习笔记]第二节 Sencha Cmd 学习笔记 使你的sencha cmd跑起来
- 巧用“沃通国际认证”防钓鱼
- 根据uuid来挂载磁盘
- Android高效加载大图、多图解决方案,有效避免程序OOM
- 追踪mysql操作记录实践2
- IIS 设置了Session的超时时间
- [ExtJS5学习笔记]第三十五节 sencha extjs 5 组件查询方法总结
- UIEventKit EKCalender EKEventStore EKSource
- ORACLE数值类型的性能优化技巧number,Int,float
- mysql中You can't specify target table for update in FROM clause错误
- 39999961853你的线上店铺被我们承包了丨阿里巴巴全行业&u8226;优质班开课嘞!
- Android技术——列表呈现,AdapterView及其子类(下)
- 淘金昌龙:阿里巴巴缘何在美遭空头狙击
- 关于frameset的用法
- android 项目优化之toast提示优化