`
roc08
  • 浏览: 227196 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ExtJs4的组件查询ComponentQuery

阅读更多
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]得到这个组件



       
分享到:
评论
7 楼 nvee 2013-12-07  
如果我要获取gird选中的行的id属性值怎么写,求教谢谢
6 楼 yanwushu 2013-09-19  
roc08 写道
roc08 写道
yanwushu 写道
css 中class和id的选择器和ext一样吧 ?!

css中class用#,此处id用#

抱歉,各位,这里说错了,记混了,css中class也是用.,id用#

写博客最重要的是说出自己的想法和对知识的理解,其他都不重要。但是话说回来,不少人评论的表达方式需要改进呀!
5 楼 roc08 2013-01-31  
roc08 写道
yanwushu 写道
css 中class和id的选择器和ext一样吧 ?!

css中class用#,此处id用#

抱歉,各位,这里说错了,记混了,css中class也是用.,id用#
4 楼 roc08 2013-01-31  
rzy2009 写道
有没有搞错啊,怎么相反了,css中的class就是.,id就是#,jquery 也是这样,请不要勿人子弟!

我查了一下css中id确实是用#,我记错了,真心欢迎指出错误,但是我非常讨厌你说的话,什么叫误人子弟?最烦你这种人了,觉得自己什么都懂,一副伪君子嘴脸,我记性不好,写错了,误导您老人家了,误人子弟你写错了,请不要误人子弟!
3 楼 rzy2009 2013-01-31  
有没有搞错啊,怎么相反了,css中的class就是.,id就是#,jquery 也是这样,请不要勿人子弟!
2 楼 roc08 2013-01-14  
yanwushu 写道
css 中class和id的选择器和ext一样吧 ?!

css中class用#,此处id用#
1 楼 yanwushu 2012-12-25  
css 中class和id的选择器和ext一样吧 ?!

相关推荐

    extjs 3.1 组件 使用

    在本篇文章中,我们将深入探讨如何在实际项目中使用ExtJS 3.1的组件。 首先,`css`目录包含了ExtJS 3.1的样式文件。这些CSS文件用于定义组件的外观和布局,包括颜色、字体、边距、边框等。在使用过程中,我们需要...

    extJs3升级extjs4方案

    在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败。ExtJS4 已完全重新写 grid 组件,tree 也被更新,所以从版本 3 到 4 大部分的属性改变了。 在 ExtJS4 中,API 也发生了很...

    Extjs树分页组件扩展

    在ExtJS中,树形(Tree)组件是一种用于展示层级数据的强大工具,它允许用户以树状结构浏览和操作数据。然而,在处理大量数据时,一次性加载所有节点可能导致页面响应变慢,这时就需要引入分页功能。"Extjs树分页...

    EXTJS 上传组件及示例

    EXTJS 是一款基于JavaScript的富客户端应用开发框架,由Sencha公司开发,它提供了一整套组件化的用户界面元素和强大的数据绑定功能。在EXTJS 中,上传组件是用于实现文件上传功能的关键部分,这对于创建交互性强、...

    Extjs3.0 常用组件介绍及怎么安装开发利器Spket

    **ExtJS 3.0 常用组件介绍** ExtJS 是一款强大的JavaScript库,用于构建富客户端Web应用。在3.0版本中,它提供了一系列丰富的组件,这些组件可以帮助开发者构建功能丰富的用户界面。以下是一些ExtJS 3.0中的常用...

    几个不错的EXTJS拓展组件

    4. **布局和容器组件**:EXTJS的布局管理是其一大特色,扩展组件可能会提供更复杂或独特的布局方式,如瀑布流布局、可拖拽布局等,适应不同设计需求。 5. **交互和行为组件**:这部分组件可能包括自定义的拖放功能...

    extjs portal组件代码

    1. **Portlets**:Portlets是Portal中的基本单元,它们是可配置的、可拖动的、可调整大小的组件,可以包含任何EXTJS组件,如表格、面板、按钮等。Portlets之间可以通过拖放操作进行重新排列。 2. **Portal Column**...

    EXTJS4自学手册

    EXTJS4自学手册——EXT数据结构组件(创建一个Model) EXTJS4自学手册——EXT数据结构组件(Model数据验证,数据交互) EXTJS4自学手册——EXT数据结构组件 EXTJS4自学手册——EXT数据结构组件(proxy代理类之客户端...

    ExtJS日期多选组件源码

    通过研究和理解"ExtJS日期多选组件源码",开发者可以深入学习ExtJS组件设计、事件处理、数据绑定等核心概念,并能进一步定制适合自己项目需求的日期选择组件。这样的组件对于提高开发效率和用户体验具有积极的意义。

    EXTJS 4 树形表格组件使用示例

    在EXTJS 4中,树形表格组件不仅支持基本的节点操作,如展开、折叠、拖放,还提供了丰富的数据绑定和筛选功能,是处理复杂数据结构的理想选择。 首先,让我们深入了解一下EXTJS 4树形表格组件的特性: 1. **层级...

    ExtJs各组件简单应用例子导入到eclipse即可

    1. **下载ExtJS组件示例**:首先,你需要从官方或者其他可靠的源获取ExtJS的组件示例代码。这些示例通常包括HTML文件、JavaScript文件和可能的CSS文件,它们展示了如何在实际项目中使用各种组件。 2. **创建Eclipse...

    extjs各种常用组件归纳总结

    extjs各种组件的详细实现及各种扩展归纳总结,包括各种grid,tree,布局,表单,ajax,弹出框等

    Extjs自定义组件-下拉树

    ### Extjs自定义组件——下拉树:深入解析与实现 在现代Web开发中,Extjs作为一款功能强大且灵活的框架,深受开发者喜爱。它提供了丰富的UI组件库,能够帮助开发者快速构建复杂的用户界面。其中,自定义组件是Extjs...

    ExtJS 组件扩展

    4. **注重组件复用性**:在设计和实现组件时,考虑到未来可能的应用场景,增强组件的通用性和可复用性。 综上所述,正确理解和运用ExtJS组件扩展的两个层次,不仅能够帮助开发者构建高效稳定的Web应用,还能显著...

    extjs 在线sql查询

    3. **Ajax请求**: 为了将用户的查询提交到服务器并获取结果,会使用ExtJS的Ajax组件或`Ext.Ajax.request`方法,与后端数据库进行通信。 4. **SQL执行**: 后端服务器需要处理接收到的SQL查询,可能使用Java、PHP、...

    extjs4中文文档

    这个中文文档是EXTJS4的官方文档翻译版,为开发者提供了详细的API参考和教程,帮助理解EXTJS4的各种组件、功能和工作原理。 EXTJS4的核心特性包括: 1. **组件化**:EXTJS4引入了基于MVC(Model-View-Controller)...

    ExtJS4中文教程2 开发笔记 chm

    ExtJS4 Grid组件 Extjs4 TreeGrid Extjs4 TreePanel实例 ExtJs4 动态加载 Extjs4 带复选框的树(Checkbox tree) Extjs4 新的布局方式 Extjs4 锁定表头(Locking Grid)功能 Extjs4.0 MVC实例 Extjs4.0动态填充...

    包含各种类型的extjs小图标,Extjs4小图标

    在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列图形图标,这些图标用于增强应用程序的视觉效果,提供用户友好的操作指示。 1. **图标分类**: - 图标通常分为不同的类别,如操作图标(比如...

    ExtJS4多文件上传,带进度条及管理

    总之,"ExtJS4多文件上传,带进度条及管理"是Web开发中的高级功能,它结合了ExtJS4的组件化开发优势和swfupload的高效上传能力,为用户提供了一流的文件上传体验。开发者需要掌握相关技术和API,才能灵活地实现这一...

Global site tag (gtag.js) - Google Analytics