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]得到这个组件
分享到:
相关推荐
在本篇文章中,我们将深入探讨如何在实际项目中使用ExtJS 3.1的组件。 首先,`css`目录包含了ExtJS 3.1的样式文件。这些CSS文件用于定义组件的外观和布局,包括颜色、字体、边距、边框等。在使用过程中,我们需要...
在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败。ExtJS4 已完全重新写 grid 组件,tree 也被更新,所以从版本 3 到 4 大部分的属性改变了。 在 ExtJS4 中,API 也发生了很...
在ExtJS中,树形(Tree)组件是一种用于展示层级数据的强大工具,它允许用户以树状结构浏览和操作数据。然而,在处理大量数据时,一次性加载所有节点可能导致页面响应变慢,这时就需要引入分页功能。"Extjs树分页...
EXTJS 是一款基于JavaScript的富客户端应用开发框架,由Sencha公司开发,它提供了一整套组件化的用户界面元素和强大的数据绑定功能。在EXTJS 中,上传组件是用于实现文件上传功能的关键部分,这对于创建交互性强、...
**ExtJS 3.0 常用组件介绍** ExtJS 是一款强大的JavaScript库,用于构建富客户端Web应用。在3.0版本中,它提供了一系列丰富的组件,这些组件可以帮助开发者构建功能丰富的用户界面。以下是一些ExtJS 3.0中的常用...
4. **布局和容器组件**:EXTJS的布局管理是其一大特色,扩展组件可能会提供更复杂或独特的布局方式,如瀑布流布局、可拖拽布局等,适应不同设计需求。 5. **交互和行为组件**:这部分组件可能包括自定义的拖放功能...
1. **Portlets**:Portlets是Portal中的基本单元,它们是可配置的、可拖动的、可调整大小的组件,可以包含任何EXTJS组件,如表格、面板、按钮等。Portlets之间可以通过拖放操作进行重新排列。 2. **Portal Column**...
EXTJS4自学手册——EXT数据结构组件(创建一个Model) EXTJS4自学手册——EXT数据结构组件(Model数据验证,数据交互) EXTJS4自学手册——EXT数据结构组件 EXTJS4自学手册——EXT数据结构组件(proxy代理类之客户端...
通过研究和理解"ExtJS日期多选组件源码",开发者可以深入学习ExtJS组件设计、事件处理、数据绑定等核心概念,并能进一步定制适合自己项目需求的日期选择组件。这样的组件对于提高开发效率和用户体验具有积极的意义。
在EXTJS 4中,树形表格组件不仅支持基本的节点操作,如展开、折叠、拖放,还提供了丰富的数据绑定和筛选功能,是处理复杂数据结构的理想选择。 首先,让我们深入了解一下EXTJS 4树形表格组件的特性: 1. **层级...
1. **下载ExtJS组件示例**:首先,你需要从官方或者其他可靠的源获取ExtJS的组件示例代码。这些示例通常包括HTML文件、JavaScript文件和可能的CSS文件,它们展示了如何在实际项目中使用各种组件。 2. **创建Eclipse...
extjs各种组件的详细实现及各种扩展归纳总结,包括各种grid,tree,布局,表单,ajax,弹出框等
### Extjs自定义组件——下拉树:深入解析与实现 在现代Web开发中,Extjs作为一款功能强大且灵活的框架,深受开发者喜爱。它提供了丰富的UI组件库,能够帮助开发者快速构建复杂的用户界面。其中,自定义组件是Extjs...
4. **注重组件复用性**:在设计和实现组件时,考虑到未来可能的应用场景,增强组件的通用性和可复用性。 综上所述,正确理解和运用ExtJS组件扩展的两个层次,不仅能够帮助开发者构建高效稳定的Web应用,还能显著...
3. **Ajax请求**: 为了将用户的查询提交到服务器并获取结果,会使用ExtJS的Ajax组件或`Ext.Ajax.request`方法,与后端数据库进行通信。 4. **SQL执行**: 后端服务器需要处理接收到的SQL查询,可能使用Java、PHP、...
这个中文文档是EXTJS4的官方文档翻译版,为开发者提供了详细的API参考和教程,帮助理解EXTJS4的各种组件、功能和工作原理。 EXTJS4的核心特性包括: 1. **组件化**:EXTJS4引入了基于MVC(Model-View-Controller)...
ExtJS4 Grid组件 Extjs4 TreeGrid Extjs4 TreePanel实例 ExtJs4 动态加载 Extjs4 带复选框的树(Checkbox tree) Extjs4 新的布局方式 Extjs4 锁定表头(Locking Grid)功能 Extjs4.0 MVC实例 Extjs4.0动态填充...
在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列图形图标,这些图标用于增强应用程序的视觉效果,提供用户友好的操作指示。 1. **图标分类**: - 图标通常分为不同的类别,如操作图标(比如...
总之,"ExtJS4多文件上传,带进度条及管理"是Web开发中的高级功能,它结合了ExtJS4的组件化开发优势和swfupload的高效上传能力,为用户提供了一流的文件上传体验。开发者需要掌握相关技术和API,才能灵活地实现这一...