一个UI前台组件肯定会比较多,我们通常习惯性的使用ID来获取需要操作的组件,但是这种方法是extjs推荐的么?有没有extjs推荐使用的获取组件的方法呢?

目录

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 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 组件查询方法总结的更多相关文章

  1. [ExtJS5学习笔记]第三十四节 sencha extjs 5 grid表格之java后台导出excel

    继上次使用js前端导出excel之后,还有一个主要大家比较关注的是后台实现导出excel,因为本人开发使用的java所以这里使用apache的开源项目poi进行后台excel的导出. 本文目录 本文目 ...

  2. [ExtJS5学习笔记]第三十六节 报表组件mzPivotGrid

    mzPivotGrid 是一个报表组件,采用这个组件之后,可以令你的应用体现更多的价值. 什么是pivot grid 什么是mzPivotGrid 学习资源 与图表组件的融合 什么是pivot gri ...

  3. Dynamic CRM 2013学习笔记(三十五)自定义审批流6 - 审批通过后,再审批 - 二次审批

    最近有个特殊的需求,客户想做二次审批,就是审批通过后,再走一次审批流程.最开始一想,这还不简单,审批通过后,直接把状态改成draft就完了,后来一试,发现一堆问题,比如第一次审批完后,界面是不允许修改 ...

  4. [ExtJS5学习笔记]第三十节 sencha extjs 5表格gridpanel分组汇总

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/42240531 本文作者:sushengmiyan ------------------ ...

  5. Unity3D学习笔记(三十五):Shader着色器(2)- 顶点片元着色器

    Alpha测试 AlphaTest Great:大于 AlphaTest Less:小于 AlphaTest Equal:等于 AlphaTest GEqual:大于等于 AlphaTest LEqu ...

  6. [extjs5学习笔记]第三十八节 sencha CMD 6.0.0.220版本安装

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/46740381 简介 sencha cmd 6安装过程不需要UAC控制了对于widnow ...

  7. [ExtJS5学习笔记]第三十三节 sencha extjs 5 grid表格导出excel

    使用extjs肯定少不了使用表格控件,用到表格,领导们(一般)还是惯于使用excel看数据,所以用到extjs表格的技术猿们肯定也会有导出表格excel这一个需求,本文主要针对如何在用extjs将gr ...

  8. Python学习笔记(三十五)—内置模块(4)struct

    摘抄自:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/001431955007 ...

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

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

随机推荐

  1. 运用正则+replace+substring将一段英语的字母大写 angurlar运用自定义指令filter完成首字母大写

    复习下js基础并运用正则+replace+substring将一段英语的字母大写 <!DOCTYPE html><html> <head> <meta cha ...

  2. js常用的字符串方法分析

    ##字符串## 字符串: 由0个或多个字符组成,被成对的英文单引号或双引号包含起来的. 字符编码: 每一个字符在计算机存储的编号. 计算机会保存有一套或几套用于标注编号与字符对应关系的字典.(字符集) ...

  3. TCP三次握手详解及释放连接过程

    TCP在传输之前会进行三次沟通,一般称为"三次握手",传完数据断开的时候要进行四次沟通,一般称为"四次挥手". 两个序号和三个标志位: (1)序号:seq序号, ...

  4. 实验吧_NSCTF web200&FALSE(代码审计)

    挺简单的一个代码审计,这里只要倒序解密就行了,这里给一下python版的wp import codecs import base64 strs = 'a1zLbgQsCESEIqRLwuQAyMwLy ...

  5. 网络安全实验室_上传关writeup

    请上传一张jpg格式的图片 先传个图片码试试 我肯定乖嘛(#`Д´)ノ 气到改后缀 请上传一张jpg格式的图片 我猜是00截断,不信来试试 先在赋值1.php .jpg,接着去hex中找到空格改成00 ...

  6. 参考用bat文件

    @echo off rem *************** start of 'main' set DEBUG= " (set TRACE=echo) else (set TRACE=rem ...

  7. Python获取会议部分的信息内容(不断完善中)

    这是一个用于获取物理师会议报告的简单爬虫,数据库表结构正在不断完善中 爬虫信息: # -*- coding:utf-8 -*- import urllib.request import pymysql ...

  8. [HNOI 2016]序列

    Description 题库链接 给你一个长度为 \(n\) 的序列 \(A\) ,给出 \(q\) 组询问.每次询问 \([l,r]\) ,求该区间内所有的子序列中最小值的和. \(1\leq n, ...

  9. [Tjoi 2013]松鼠聚会

    3170: [Tjoi 2013]松鼠聚会 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1318  Solved: 664[Submit][Stat ...

  10. NKOJ4191 Trie树

    问题描述 字母(Trie)树是一个表示一个字符串集合中所有字符串的前缀的数据结构,其有如下特征: 1.树的每一条边表示字母表中的一个字母  2.树根表示一个空的前缀  3.树上所有其他的节点都表示一个 ...