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，返回匹配组件的数组。下面演示其用法：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
//创建列布局方式的窗口，包含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