`
zzhangyx
  • 浏览: 69899 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

ComponentQuery

    博客分类:
  • EXT
阅读更多

对于Extjs3.x来说,Extjs4.0组件查找使用了ComponentQuery类,这个类是用来查找容器内的组件的。实现方式类似于CSS的Selector。

对于Extjs3.x来说,Extjs4.0组件查找使用了ComponentQuery类,这个类是用来查找容器内的组件的。实现方式类似于CSS的Selector。在extjs3.x中,查找组件的方式有很多,例如:(ID组件ID)、(ref组件引用)、(items.get(0)组件的层级)。在extjs4.0中,则多了ComponentQuery。利用这个类,将更加方便的查找组件。下面,则是将extjs3和extjs4各种查找组件的方式做下对比。

Extjs3.x:

ID:这就是所熟知的Ext.getCmp(“组件ID”),虽然说这种方式查找组件最直接,也最容易,但是如果随着程序体积变大,组件越来越多,那么可能会发生组件ID相同的事情发生,这样一来,就可能发生显示的问题和获取对象不正常。

ref:在EXTJS3中,所有的组件都会有一个ref属性,也就是reference的意思。这种方式是通过对组件的引用而得到组件对象。例如:ref:’mypanel’,但是这种方式的局限性在于,他只能查找不同层级之间的组件。也就是说A[a,b,c] C[d,e,f],这样的方式,使用ref非常方便,但如果是B[c,c,d]这样的方式,就会出现问题,因为在某一层级上,出项了两个相同的组件。

items.get(0):这种方式是通过首先获得组件中元素的一个数组,然后通过数组获得想要的组件对象,这种方式,我们一般不会用到,因为,他非常不灵活,如果我们的元素层级发生改变的话,我们将不能获取我们想要的组件,维护起来也非常困难。所以,这种方式,是用的最少的一种方式。

在Extjs4.0中,我们依然可以沿用Extjs3.x中查找组件的方式,但是在Extjs4.0中,我们可以利用ComponentQuery,方便找到对应组件。

1、 通过组件ID获取组件:"#组件ID”,如果通过这种方式,那么一定要记住在组件ID前添加#号。

2、 得到某一组件下所有的指定类型的组件:"panel>button”,这种方式是查找所有panel组件下的所有button组件。

3、 通过xtype:"treepanel”或".treepanel

4、如果想获取所有button并且action为save的button,则可以使用"button[action=save] ",又或者获取所有panel,并且autoscroll属性为true的panel,则可以使用"panel[autoScroll=true]"

还有两种方式,是查找某一组件的子组件或上级组件,例如:

1、查找window下的form:win.down(“form”)

2、查找button的父组件window:button.up(“window”);


最明显的例子就是我们在extjs4.0使用MVC模式进行开发的时候,经常会在control控制中大量使用'viewport > panel',’edit button[action=save]’这类查找,当我们点击button进行数据保存的时候,我们会使用

 
  1. var win   = button.up('window'),  
  2.  form   = win.down('form'), 
  3. record = form.getRecord(),

这类型的查找进行数据更新。

最后,在extjs4.0 MVC模式中,经常会碰到

 
  1. refs:[
  2.     {ref: 'menu',selector: 'tablepanel'},
  3.     {ref: 'feedList', selector: 'feedlist'},
  4.     {
  5.          ref: 'feedWindow'
  6.         selector: 'feedwindow'
  7.         autoCreate: true,
  8.         xtype: 'feedwindow'
  9.     }
  10. ]

这样的书写方式。有很多人问我这是什么意思,查API也找不到。网络上也找不到,其实看extjs3.x中查找组件的方式,就会明白了。Refs是一个查找并匹配组件的集合,集合里面则指定了需要的操作,即查找一个组件,而找到的这个组件所匹配组件就是selector指定的,用上面代码一条{ref: 'menu',selector: 'tablepanel'}来稍做解释,即查找menu组件(其实是一颗树),点击树节点,结果将在'tablepanel'中显示。这样解释可能比较含糊,那么就用官方例子做个解释吧。{ref: 'feedData', selector: 'feedlist dataview'}。这条的含义是查找'feedData',将'feedData'显示在'feedlist的子组件dataview'上。

总结下,就是在ExtJS4中所有的组件都有一个query方法,这个方法就是ComponentQuery的实现。当然,如果还是不明白的话,就可以使用:

Ext.ComponentQuery.query("tabpanel");

Ext.ComponentQuery.query("#mytree")

等等。实在extjs4.0实际使用过程中,如果要调用或查找组件,exjts会自动调用ComponentQuery的query方法来查找对应组件。

例子:

 
  1. init:function(){
  2.     this.control({
  3.         'smsmenu': {//这里不必写全部的代码Ext.ComponentQuery.query(…);
  4.              itemmousedown: this.loadMenu
  5.         }
  6.     })
  7. }

这就是本节所学到的内容,如果文中有错误或有更好的方法,欢迎留言交流。我们一起学习,共同进步!!

 

本文转至 :http://www.mhzg.net/a/201110/201110202110412.html

分享到:
评论

相关推荐

    sencha touch动态加载组件

    2. **利用Ext.ComponentQuery**:这是一个强大的查询工具,可以根据特定的选择器找到组件。在需要加载某个组件时,可以通过ComponentQuery查找并显示它,而不是一次性加载所有组件。 3. **动态加载模型和存储...

    Ext获取对象

    例如,`var components = Ext.ComponentQuery.query('panel[title=My Panel]')`会找到所有标题为“My Panel”的面板。 9. **Store的联动**: 当数据存储(Store)的数据发生变化时,与其关联的视图(如Grid)会...

    ext ppt

    4. **DOM导航(Dom Navigation)**: `ExtJSDomNavigation`可能涉及到在DOM树中移动和选择元素的技术,如`Element`和`ComponentQuery`。这些工具帮助开发者更方便地查找、选择和操作页面上的特定元素。 这些PPT的...

    ExtJS4中文教程2 开发笔记 chm

    ExtJS4学习笔记(十四)--- ComponentQuery ExtJS4学习笔记(四)---Grid的使用 Extjs4开发笔记(三)——菜单的实现 Extjs4开发笔记(二)——框架的搭建 Extjs4开发笔记(五)——动态grid Extjs4开发笔记(四)——实现登录...

    query:受 jquerysizzle 支持并受 componentquery 启发的 X-Browser DOM 元素选择器

    询问 支持的 X-Browser DOM 元素查询 安装 使用安装: $ component install cristiandouce/query 应用程序接口 var o = require ( 'query' ) ; // Query single elements var container = o ( '#container' ) ;...

    Ext 4.0官方最新版下载

    1. **ComponentQuery**:增强了查找和操作组件的能力,类似于CSS选择器。 2. **DataView** 和 **GridPanel** 的增强:提供了更强大的数据绑定和渲染功能。 3. **sencha-touch-all.js** 合并:支持移动设备,与Ext JS...

    Extjs4-学习指南

    - **ComponentQuery**:使用组件查询 API 进行组件查找。 - **Ext.data.Model**:深入理解数据模型的使用。 - **Combobox 三级联动**:实现级联选择框的功能。 #### 5. 员工管理系统 - **准备工作**:规划项目结构...

    Ext的gridpanel控件二次加载问题

    1. 使用`Ext.ComponentQuery`查询已存在的GridPanel,避免使用全局变量。 2. 在需要时动态加载和卸载GridPanel,通过Ext JS的容器系统实现。 3. 如果数据更新频繁,可以考虑使用Store的buffered rendering特性,减少...

    EXT dojochina Ext类实例方法.rar

    4. **Ext.ComponentQuery.query()**: 使用CSS选择器风格的语法,查询EXT JS中的组件,返回匹配组件的数组。 5. **Ext.getCmp()**: 通过组件的ID获取组件实例,这是EXT JS中获取特定组件常用的方式。 6. **...

    多年积攒下来的EXT3.3例子大放送

    通过`Ext.ComponentQuery`选择器和`Ext.Component`的事件监听方法,开发者可以实现组件间的交互。示例中可能包含如何绑定事件处理函数的代码。 6. **主题与皮肤**:EXTJS允许自定义主题,以改变应用程序的整体视觉...

    如何在MyEclipse中添加Ext智能提示功能.rar

    现在,打开一个包含Ext代码的JavaScript文件,尝试输入一些Ext类或方法,如`Ext.create`或`Ext.ComponentQuery.query`,MyEclipse应该会在你键入时显示智能提示。 7. **优化智能提示体验**: 为了获得更好的智能...

    extmvc的资料

    这里使用了ComponentQuery语法来选择特定的组件,并为其注册事件处理器。 #### 五、View的定义与使用 View是用户界面的核心部分,在Ext JS中,可以通过定义View组件来创建复杂的用户界面。以下是一个简单的列表...

    Extjs4学习指南

    - **ComponentQuery**:介绍如何使用组件查询API来查找和操作DOM元素。 - **Ext.data.Model**:深入理解模型类的使用方法。 - **Combobox三级联动**:实现级联选择框,用于展示层次关系的数据。 #### 5. 员工管理...

    Ext Js权威指南(.zip.001

    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....

    使用Jasmine进行ExtJS应用程序单元测试的循序渐进指南

    同时,利用`Ext.ComponentQuery.query`可以方便地找到组件实例,以便进行交互和验证。 在所有测试完成后,运行Jasmine测试套件。这可以通过命令行工具或者在浏览器中通过HTML报告页面实现。如果一切正常,测试会...

Global site tag (gtag.js) - Google Analytics