ExtJS 组件查询（Component Query）

更新记录
2022年7月20日 发布。
2022年7月6日 从笔记迁移到博客。

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

组件查询（Component Query）

说明

Ext.ComponetQuery是预定义的单例对象，不需要实例化

Ext.all()

使用类似CSS选择器的语法匹配所有符合条件组件
Ext.all ( selector, [root] ) : Ext.Component[]

是Ext.ComponentQuery.query()方法的快捷方式
请看Ext.ComponentQuery.query()方法

Ext.first()

使用类似CSS选择器的语法匹配第一个符合条件的组件
Ext.first ( selector, [root] ) : Ext.Component
注意：如果没有匹配到组件，则会返回null

实例：

组件匹配类CSS语法

通过组件的xtype查询（Basic Component lookup）

注意：继承自xtype的组件也会被匹配到，如需精确类型(exact type)加上(true)

实例：
查找所有xtype:button的组件

Ext.ComponentQuery.query('button');

查找所有xtype: panel的组件

Ext.ComponentQuery.query('panel');
var panelsArray = Ext.ComponentQuery.query('panel');

查找上一个textfield组件

prevField = myField.previousNode('textfield');

精确匹配textfield组件

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

通过组件的itemId、id

在itemid、id前面加上#即可

实例：
匹配Id

Ext.all('#myContainer');
Ext.ComponentQuery.query('#foo');
Ext.ComponentQuery.query('#usersPanel');

结合xtype使用

Ext.all('container#container-1003');

当组件的id或xtype包含.时，可以在选择器中转义

Ext.all('my\.panel#myPanel');
var myPanel = Ext.ComponentQuery.query('my\\.panel#myPanel');

通过组件的层级遍历（Traversing Component tree）

类似CSS的层级匹配语法：
E F 与F匹配的E的所有子孙代组件
E > F 与F匹配的E的所有直接子组件
E ^ F 与F匹配的E的所有父组件

实例：

Ext.all('window textfield[name=login] ^ form > button[action=submit]');
var panelsWithinmyCt = Ext.ComponentQuery.query('#myCt panel');
var directChildPanel = Ext.ComponentQuery.query('#myCt > panel');

使用组件的祖先关系查找组件

Ext.ComponentQuery.query('formpanel numberfield');
Ext.ComponentQuery.query('panel buttons');
Ext.ComponentQuery.query('panel > button');  //必须是儿子

通过组件的属性和方法（Searching by Component attributes）

类似CSS的属性匹配，只不过ExtJS支持组件的属性和表达式
属性匹配支持的运算符：
= 匹配属性值等于
!= 匹配属性值不等于
^= 匹配属性值开头
$= 匹配属性值结尾
*= 匹配属性值包含
%= 匹配属性值
|= 匹配属性值
~= 匹配属性值包含（空格）
/= 匹配属性值正则匹配

注意：如果需要只匹配对象自有的属性，请在属性名前加上@

实例：
匹配禁用的按钮

Ext.all('button[disabled]');

匹配标题为Test的panel

Ext.all('panel[title="Test"]');

记得如果有特殊符号要进行转义

Ext.ComponentQuery.query('[myProperty=\\[foo\\]]');
Ext.ComponentQuery.query('panel[title="^Sales for Q\\[1-4\\]"]');

与xtype结合使用，属性匹配CSS类

Ext.ComponentQuery.query('panel[cls=my-cls]');

匹配包含指定CSS类的组件

Ext.ComponentQuery.query('panel[cls~=my-cls]');

匹配title属性以Sales开头的panel组件

Ext.ComponentQuery.query('panel[title^=Sales]');

匹配title属性以name结尾的field组件

Ext.ComponentQuery.query('field[fieldLabel$=name]');

匹配action属性与正则表达式匹配(为edit或save)的button组件

Ext.ComponentQuery.query('button[action/="edit|save"]');

匹配属于组件自身的属性

Ext.ComponentQuery.query('panel[@collapsed=false]');

匹配表达式成立

var disabledFields = myFormPanel.query("{isDisabled()}");

查找所有xtype:button并且title属性为my button的组件

Ext.ComponentQuery.query("button[title='my button']");
parent.child('button[itemId=save]');
parent.query('textfield[title=my button]');

通过组件的方法进行查询

Ext.ComponentQuery.query('textfield{isValid()}');

伪类匹配（Pseudo classes）

类似于CSS选择器中的伪类
伪类匹配常用于过滤匹配的组件

支持的伪类：
:not() 排除
:first 只保留匹配成功的第一个
:last 只保留匹配成功的最后一个
:focusable Filters out all except Components which by definition and configuration are potentially able to receieve focus, and can be focused at this time. Component can be focused when it is rendered, visible, and not disabled. Some Components can be focusable even when disabled (e.g. Menu items) via their parent Container configuration. Containers such as Panels generally are not focusable by themselves but can use focus delegation (defaultFocus config). Some Containers such as Menus and Windows are focusable by default.
:canfocus Filters out all except Components which are curently able to receieve focus. That is, they are defined and configured focusable, and they are also visible and enabled. Note that this selector intentionally bypasses some checks done by focusable selector and works in a subtly different way. It is used internally by the framework and is not a replacement for :focusable selector.
:nth-child() Filters Components by ordinal position in the selection.
注意：计数基于1开始
:scrollable 匹配可滚动的组件
:visible 过滤掉不可见的组件
May test deep visibility using ':visible(true)'

实例：
匹配panel下的第一个button

Ext.ComponentQuery.query('panel > button:first');

匹配表单中的最后一个域

Ext.ComponentQuery.query('form[title=Profile] field:last');

匹配panel中第一个可以聚焦的子组件并聚焦

panel.down(':canfocus').focus();

选择所有表单域但不包括隐藏域

form.query('field:not(hiddenfield)');

匹配tabpanel最后一个可滚动的组件

tabpanel.down(':scrollable[hideMode=display]:last')

匹配奇数位的子组件

form.query('field:nth-child(2n+1)'); // or use shortcut: :nth-child(odd)

匹配偶数位的子组件

form.query('field:nth-child(2n)');   // or use shortcut: :nth-child(even)

匹配3N位的子组件

form.query('field:nth-child(3n)');

匹配所有可见的3n位置的表单域

form.query('field:not(hiddenfield):nth-child(3n)');

匹配第一个可聚焦的子组件并聚焦

myFormPanel.child(':canfocus').focus();

匹配表单中奇数位置的文本域

myFormPanel.query('textfield:nth-child(odd)');

匹配所有可见的偶数位置的表单域

myFormPanel.query('field:not(hiddenfield):nth-child(even)');

匹配tabpanel中所有可滚动的组件

tabpanel.query(':scrollable');

组合匹配（Conditional matching）

可以把多种匹配方式结合起来使用

实例：
匹配必须符合全部条件的组件

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

匹配符合其中一个条件的组件

Ext.all('field[fieldLabel^=User],field[fieldLabel*=passwd]');
var gridsAndTrees = Ext.ComponentQuery.query('gridpanel, treepanel');

必要时字符进行转义

Ext.all('field[fieldLabel^="User\\, foo"], field[fieldLabel*=password]');

Ext.ComponentQuery.query()方法

query ( selector, [root] ) : Ext.Component[]

说明：通过ExtJS类似CSS查询语法进行组件查询
注意：Ext.ComponetQuery是预定义单例对象，可以直接使用，不需要实例化
参数selector： 查询条件字符串
参数[root]： 查询的起始位置引用，可选
返回值：数组类型，元素为符合条件的组件，否则为空数组

实例：
匹配必须符合全部条件的组件

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

Ext.getCmp()方法

通过组件的id获得组件

Ext.getCmp ( id ) : Ext.Component

说明：
所有的组件都会被注册到 Ext.ComponentManager对象中
所以可以使用Ext.getCmp() 和 组件Id 获得组件的引用
注意：Ext.getCmp()是Ext.ComponentManager.get()方法的快捷别名方法

实例：

var component = Ext.getCmp('id1');

Ext.Component.up()方法

查找当前组件的父组件
所有继承自Ext.Component类的组件都具有该方法
参数：查询条件字符串
注意：如果不加任何参数，则返回直接父组件

实例：向上查找父girdpanel组件

var grid = button.up('gridpanel');

Ext.Container.down()方法

Ext.Container.down()方法用于查找当前组件的子组件
注意：down方法是在容器中定义的
注意：down方法返回第一个匹配的组件

Ext.Container.query()方法

说明：query类似Ext.ComponentQuery.query方法，但其作用域限定在容器内，通常用于查询子组件
返回值：返回查找到的所有组件组成的数组
提示：和down和up差异不大

实例：查询所有按钮

var allButtons = grid.query('button');

Ext.Container.child()方法

说明：获得第一个子组件

Ext.Component.nextNode()方法

作用：获得当前组件的下一个节点

Ext.Component.previousNode()方法

作用：获得当前组件的上一个节点

Ext.Component.previousSibling()方法

作用：获得当前组件的上一个节点（同层次）

Ext.Component.nextSibling ()方法

作用：获得当前组件的下一个节点（同层次）

获得组件的DOM元素

使用组件的.getEl().dom方法

//创建组件
var btn = Ext.create('Ext.button.Button',{
    text: 'PandaButton',
    renderTo: Ext.getBody()
});
//获得组件的DOM元素
var dom = btn.getEl().dom;
console.log(dom);