By Alex
/ in
0
ExtJS 4元素与组件查询
ExtJS提供了丰富的API，允许使用类似CSS选择器的语法来进行元素、组件的查询
元素查询
CSS选择器
元素选择符
| 语法 | 说明 |
| * | 匹配任何元素 |
| E | 匹配标签名为E的元素 |
| E F | 匹配所有E元素的F子代元素 |
| E > F | 匹配所有E元素的直接F子元素 |
| E + F | 匹配前面存在E元素节点的F元素 |
| E ~ F | 匹配前一个节点为E元素的F元素 |
属性选择符
对于属性选择符，@和引号是可选的，例如div[@foo='bar']也是正确的语法
| 语法 | 说明 |
| E[foo] | 包含foo属性的元素 |
| E[foo=bar] | foo属性为bar的元素 |
| [foo^=bar] | foo属性以bar开头的元素 |
| E[foo$=bar] | foo属性以bar结束的元素 |
| E[foo*=bar] | foo属性包含bar的元素 |
| E[foo%=2] | foo属性的值能被2整除的元素 |
| E[foo!=bar] | foo属性不等于bar的元素 |
伪类选择符
| 语法 | 说明 |
| E:first-child | 作为第一个子节点的E元素 |
| E:last-child | 作为最后一个子节点的E元素 |
| E:nth-child(N) | 作为第N个子节点的E元素（从1开始计数） |
| E:nth-child(odd) | 作为第奇数个子节点的E元素 |
| E:nth-child(even) | 作为第偶数个子节点的E元素 |
| E:only-child | 没有兄弟节点的E元素 |
| E:checked | checked属性为真的E元素，主要用于checkbox、radio |
| E:first | 结果集中第一个E元素 |
| E:last | 结果集中最后一个E元素 |
| E:nth(N) | 结果集中第N个E元素（从1开始计数） |
| E:odd | 结果集中奇数个元素 |
| E:even | 结果集中偶数个元素 |
| E:contains(foo) | 其innerHTML中包含foo的E元素 |
| E:nodeValue(foo) | 其某个文本节点的值为foo的E元素 |
| E:not(S) | 不满足简单选择符S的E元素 |
| E:has(S) | 包含满足简单选择符S的后代的E元素 |
| E:next(S) | 后一个节点满足满足简单选择符S的E元素 |
| E:prev(S) | 前一个节点满足满足简单选择符S的E元素 |
| E:any(S1|S2|S2) | 满足简单选择符S1、S2、S3中任何一个的E元素 |
CSS值选择符
| 语法 | 说明 |
| E{display=none} | CSS属性display为none的E元素 |
| E{display^=none} | CSS属性display的值以none开始的E元素 |
| E{display$=none} | CSS属性display的值以none结尾的E元素 |
| E{display*=none} | CSS属性display的值包含none的E元素 |
| E{display%=2} | CSS属性display的值被2整除的E元素 |
| E{display!=none} | CSS属性display不为none的E元素 |
工具类Ext.dom.Query
该类提供以下方法：
| 方法 | 说明 |
| compile | 把指定的CSS选择器编译为可重用的函数 |
| filter | 在一个HTMLElement数组里，依据CSS选择器进行过滤 |
| is | 判断元素是否匹配给定的CSS选择器 |
| select | 根据CSS选择器选取一个HTMLElement的数组 |
| selectNode | 根据CSS选择器选取单个HTMLElement |
组件查询
工具类Ext.ComponentQuery
这是一个工具类，提供了类似于CSS选择器的方式来查询全局（Ext.ComponentManager）或者某个容器（Ext.container.Container）内的组件。其最重要的函数是query，返回匹配组件的数组。下面演示其用法：
//创建列布局方式的窗口，包含3个面板
var panel1 = Ext.create( 'Ext.panel.Panel', {
title : 'Panel 1',
html : 'Body 1',
id : 'panel1Id',
columnWidth : .25,
height : 120
} );
var panel2 = Ext.create( 'Ext.panel.Panel', {
title : 'Panel 2',
html : 'Body 2',
columnWidth : .25,
height : 120
} );
var panel3_1 = Ext.create( 'Ext.panel.Panel', {
title : 'Panel 4',
html : 'Panel 4 within Panel 3',
height : 60
} );
var panel3 = Ext.create( 'Ext.panel.Panel', {、
id:'panel3',
title : 'Panel 3',
columnWidth : 1 / 2,
items : [
panel3_1
],
height : 120
} );
var column = Ext.create( 'Ext.window.Window', {
title : 'My Window',
id : 'myWindow',
width : 400,
height : 170,
layout : 'column',
defaults : {
bodyStyle : 'padding:10px'
},
items : [
panel1, panel2, panel3
]
} );
column.show();
//根据xtype查询：所有面板的数组
var panels = Ext.ComponentQuery.query('panel');
//ID为panel3的容器内所有面板的数组
var panelsWithinPanel3 = Ext.ComponentQuery.query('#panel3 panel');
//ID为panel3的容器内直接子面板的数组
var directChildPanelsOfPanel3 = Ext.ComponentQuery.query('#panel3 > panel');
//所有窗口、面板的数组
var windowsAndPanels = Ext.ComponentQuery.query('window, panel');
//所有标题属性为Panel 1的面板的数组，注意属性需要用方括号包围
Ext.ComponentQuery.query('panel[title="Panel 1"]');
//根据ID查询组件
Ext.ComponentQuery.query('#panel3');
//伪选择符：first、last、not
//窗口的第一个面板
Ext.ComponentQuery.query('window > panel:first');
Ext.container.Container中的查询方法
| 方法 | 说明 |
| query | 查询所有匹配选择符的后代组件 |
| child | 返回第一个匹配选择符的子组件 |
| down | 返回第一个匹配选择符的后代组件 |
| up | 该方法适用于Ext.Component。返回第一个匹配选择符的祖代组件 |
| previousSibling | 该方法适用于Ext.Component。返回第一个匹配的前面的兄弟组件 |
| nextSibling | 该方法适用于Ext.Component。返回第一个匹配的后面的兄弟组件 |
Leave a Reply to point Cancel reply