[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表示严格查询即可。 1. ID或者ItemID查找 #myContainer 当需要查询ID定义的组件的时候，可以使用#来查询。 1. 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. = 表示严格等于 。 1. ~= 表示只要搜索到检索词即可。 1. ^= 表示以什么什么 开头 1. $= 表示以什么什么结尾的 1. /= 表示支持正则表达式的 ### 逻辑运算的 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)'); ~~~