[ExtJS5学习笔记]第三十五节 sencha extjs 5 组件查询方法总结
一个UI前台组件肯定会比较多,我们通常习惯性的使用ID来获取需要操作的组件,但是这种方法是extjs推荐的么?有没有extjs推荐使用的获取组件的方法呢?
目录
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)');
[ExtJS5学习笔记]第三十五节 sencha extjs 5 组件查询方法总结的更多相关文章
- [ExtJS5学习笔记]第三十四节 sencha extjs 5 grid表格之java后台导出excel
继上次使用js前端导出excel之后,还有一个主要大家比较关注的是后台实现导出excel,因为本人开发使用的java所以这里使用apache的开源项目poi进行后台excel的导出. 本文目录 本文目 ...
- [ExtJS5学习笔记]第三十六节 报表组件mzPivotGrid
mzPivotGrid 是一个报表组件,采用这个组件之后,可以令你的应用体现更多的价值. 什么是pivot grid 什么是mzPivotGrid 学习资源 与图表组件的融合 什么是pivot gri ...
- Dynamic CRM 2013学习笔记(三十五)自定义审批流6 - 审批通过后,再审批 - 二次审批
最近有个特殊的需求,客户想做二次审批,就是审批通过后,再走一次审批流程.最开始一想,这还不简单,审批通过后,直接把状态改成draft就完了,后来一试,发现一堆问题,比如第一次审批完后,界面是不允许修改 ...
- [ExtJS5学习笔记]第三十节 sencha extjs 5表格gridpanel分组汇总
本文地址:http://blog.csdn.net/sushengmiyan/article/details/42240531 本文作者:sushengmiyan ------------------ ...
- Unity3D学习笔记(三十五):Shader着色器(2)- 顶点片元着色器
Alpha测试 AlphaTest Great:大于 AlphaTest Less:小于 AlphaTest Equal:等于 AlphaTest GEqual:大于等于 AlphaTest LEqu ...
- [extjs5学习笔记]第三十八节 sencha CMD 6.0.0.220版本安装
本文地址:http://blog.csdn.net/sushengmiyan/article/details/46740381 简介 sencha cmd 6安装过程不需要UAC控制了对于widnow ...
- [ExtJS5学习笔记]第三十三节 sencha extjs 5 grid表格导出excel
使用extjs肯定少不了使用表格控件,用到表格,领导们(一般)还是惯于使用excel看数据,所以用到extjs表格的技术猿们肯定也会有导出表格excel这一个需求,本文主要针对如何在用extjs将gr ...
- Python学习笔记(三十五)—内置模块(4)struct
摘抄自:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/001431955007 ...
- [ExtJS5学习笔记]第三十五条 sencha extjs 5 组件查询方法
一UI前部组件势必更加,我们通常习惯性使用ID获取部件操作的需要.但是,这种方法是extjs推荐么?你有吗extjs利用它来获取组件的推荐方法? 夹 文件夹 extjs的查询组件的API 查询实例 主 ...
随机推荐
- 运用正则+replace+substring将一段英语的字母大写 angurlar运用自定义指令filter完成首字母大写
复习下js基础并运用正则+replace+substring将一段英语的字母大写 <!DOCTYPE html><html> <head> <meta cha ...
- js常用的字符串方法分析
##字符串## 字符串: 由0个或多个字符组成,被成对的英文单引号或双引号包含起来的. 字符编码: 每一个字符在计算机存储的编号. 计算机会保存有一套或几套用于标注编号与字符对应关系的字典.(字符集) ...
- TCP三次握手详解及释放连接过程
TCP在传输之前会进行三次沟通,一般称为"三次握手",传完数据断开的时候要进行四次沟通,一般称为"四次挥手". 两个序号和三个标志位: (1)序号:seq序号, ...
- 实验吧_NSCTF web200&FALSE(代码审计)
挺简单的一个代码审计,这里只要倒序解密就行了,这里给一下python版的wp import codecs import base64 strs = 'a1zLbgQsCESEIqRLwuQAyMwLy ...
- 网络安全实验室_上传关writeup
请上传一张jpg格式的图片 先传个图片码试试 我肯定乖嘛(#`Д´)ノ 气到改后缀 请上传一张jpg格式的图片 我猜是00截断,不信来试试 先在赋值1.php .jpg,接着去hex中找到空格改成00 ...
- 参考用bat文件
@echo off rem *************** start of 'main' set DEBUG= " (set TRACE=echo) else (set TRACE=rem ...
- Python获取会议部分的信息内容(不断完善中)
这是一个用于获取物理师会议报告的简单爬虫,数据库表结构正在不断完善中 爬虫信息: # -*- coding:utf-8 -*- import urllib.request import pymysql ...
- [HNOI 2016]序列
Description 题库链接 给你一个长度为 \(n\) 的序列 \(A\) ,给出 \(q\) 组询问.每次询问 \([l,r]\) ,求该区间内所有的子序列中最小值的和. \(1\leq n, ...
- [Tjoi 2013]松鼠聚会
3170: [Tjoi 2013]松鼠聚会 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1318 Solved: 664[Submit][Stat ...
- NKOJ4191 Trie树
问题描述 字母(Trie)树是一个表示一个字符串集合中所有字符串的前缀的数据结构,其有如下特征: 1.树的每一条边表示字母表中的一个字母 2.树根表示一个空的前缀 3.树上所有其他的节点都表示一个 ...