1.ComponentQuery简介:
ComponentQuery提供了一种类似CSS标签选择器的组件查询方式,他有两种调用方式:
(1)直接通过ComponetManager来查询:Ext.ComponentQuery.query()
(2)通过组件直接的Container来查询: combo.up('form').query()
2.优点:不用指定Id,防止Id冲突
3.使用方式:
(1)通过组件ID获取组件:"#组件ID”,如果通过这种方式,那么一定要记住在组件ID前添加#号。
(2)得到某一组件下所有的指定类型的组件:"panel>button”,这种方式是查找所有panel组件下的所有button组件。
(3)通过xtype:"treepanel”或".treepanel"。Ext.ComponentQuery.query('treepanel');
(4)通过up和down寻找上下级组件:combo.up('form') form.down('combo')
(5)通过previousNode寻找兄弟组件: myField.previousNode('textfield');
(6)通过组件的一些表达式式的属性,如果表达式的返回值为true,那么对应的组件就被选中,例如:如果组件的调用isDisabled()为true的话,那么此组件就被选中
var disabledFields = myFormPanel.query("{isDisabled()}");
(7)通过>寻找组件的直接子组件:Ext.ComponentQuery.query('#myCt > panel');
(8)通过组件的属性进行查找: Ext.ComponentQuery.query("combo[name='location']")
(9)伪类选择器(Pseudo classes)默认包含的有not,last。例如查找最后一个panel Ext.ComponentQuery.query("panel:last")
(10)通过自定义函数进行过滤:
Ext.ComponentQuery.pseudos.invalid = function(items) {
//...函数体
return result;
};
var invalidFields = myFormPanel.query('field:invalid');
4.注意:ComponentQuery.query得到的是一个数组(即使用ID得到只有一个),比如取到的只有一个组件可使用Ext.ComponentQuery.query("combo[name='location']")[0]得到这个组件
分享到:
相关推荐
ExtJS4 Grid组件 Extjs4 TreeGrid Extjs4 TreePanel实例 ExtJs4 动态加载 Extjs4 带复选框的树(Checkbox tree) Extjs4 新的布局方式 Extjs4 锁定表头(Locking Grid)功能 Extjs4.0 MVC实例 Extjs4.0动态填充...
- **ComponentQuery**:使用组件查询 API 进行组件查找。 - **Ext.data.Model**:深入理解数据模型的使用。 - **Combobox 三级联动**:实现级联选择框的功能。 #### 5. 员工管理系统 - **准备工作**:规划项目结构...
- **ComponentQuery**:介绍如何使用组件查询API来查找和操作DOM元素。 - **Ext.data.Model**:深入理解模型类的使用方法。 - **Combobox三级联动**:实现级联选择框,用于展示层次关系的数据。 #### 5. 员工管理...
例如,如果你有一个ExtJS组件,你可以编写一个spec来测试其初始化方法: ```javascript describe('MyComponent', function() { var component; beforeEach(function() { component = new MyComponent(); }); ...
1. **ComponentQuery**:增强了查找和操作组件的能力,类似于CSS选择器。 2. **DataView** 和 **GridPanel** 的增强:提供了更强大的数据绑定和渲染功能。 3. **sencha-touch-all.js** 合并:支持移动设备,与Ext JS...
4. **布局管理**:EXTJS的布局系统是其强大之处之一,包括Fit布局、Border布局、Table布局等多种布局模式,使得组件可以在不同屏幕尺寸和分辨率下自动适应。`Ext.container`包中的类定义了各种布局,开发者可能在...
8.4.1 组件管理及查询:ext.componentmanager与ext.componentquery / 423 8.4.2 焦点管理:ext.focusmanager / 424 8.4.3 z-order管理:ext.zindexmanager与ext.windowmanager / 425 8.4.4 状态管理:ext.state....
1. 使用`Ext.ComponentQuery`查询已存在的GridPanel,避免使用全局变量。 2. 在需要时动态加载和卸载GridPanel,通过Ext JS的容器系统实现。 3. 如果数据更新频繁,可以考虑使用Store的buffered rendering特性,减少...