Extjs4中的ComponentQuery

原创 2016年08月30日 09:33:04
用来找特点的所有容器(Ext.container.Container)或是通过Ext.ComponentManager找特定的所有组件
1.当找组件的时候,相当于调用Ext.ComponentQuery.query()
可以接收的参数有
1)xtype
//找xypte为panel的所有组件
var panelsArray = Ext.ComponentQuery.query('panel');
2)组件的itemId或id的属性值
找所有id为myct的panel组件,注意空格表示与操作(&&)
var panelsWithinmyCt = Ext.ComponentQuery.query('#myCt panel');
注:>表示直接,','表示或操作
//表示id为myct的直接子元素中panel的组件
var directChildPanel = Ext.ComponentQuery.query('#myCt > panel');
//表示gridpanel与treepanel组件
var gridsAndTrees = Ext.ComponentQuery.query('gridpanel, treepanel');
3)根据属性查找
//表示如果组件有autoScroll属性,那么它就被先中了
var panelsWithinmyCt = Ext.ComponentQuery.query('component[autoScroll]');
var panelsWithinmyCt = Ext.ComponentQuery.query('panel[title="Test"]');
panel[title="Test"]
4)根据组件的一些表达式式的属性,如果表达式的返回值为true,那么对应的组件就被先中
//如果组件的调用isDisabled()为true的话,那么此组件就被选中
var disabledFields = myFormPanel.query("{isDisabled()}");
5)伪类选择器(Pseudo classes)
默认包含的有not,last,
//表示在document中找最后的panel组件
var panelsArray = Ext.ComponentQuery.query('panel:last');
//自定义的
Ext.ComponentQuery.pseudos.invalid = function(items) {
    var i = 0, l = items.length, c, result = [];
    for (; i < l; i++) {
        if (!(c = items[i]).isValid()) {
            result.push(c);
        }
    }
    return result;
};
var invalidFields = myFormPanel.query('field:invalid');
if (invalidFields.length) {
    invalidFields[0].getEl().scrollIntoView(myFormPanel.body);
    for (var i = 0, l = invalidFields.length; i < l; i++) {
        invalidFields[i].getEl().frame("red");
    }
}
2.查找容器的时候
可以用Ext.container.Container.query().此方法其实是以container为根元素调用Ext.ComponentQuery.query
Ext.container.Container.down
Ext.container.Container.child
Ext.Component.up.
区分DomQuery
1.主要用于html与xml
2.有如下方式
1)可以用多选择符Ext.select('div.foo,span.foo')
2)可以选择查找的起始位置Ext.get('myEl').select('div.foo');
3)可以组查询链Ext.select('div.foo[title=bar]:first');
4)有元素选择符*,E,E F,E>F,E+F,E-F
5)可以根据属性进行查找E[foo],E[foo=bar],E[foo^$*%!=bar]
6)支持伪类选择E:first-child,E:last-child............
7)可根据CSS值进行E{display=none}

版权声明:本文为博主原创文章,未经博主允许不得转载。

Extjs4中的ComponentQuery

用来找特点的所有容器(Ext.container.Container)或是通过Ext.ComponentManager找特定的所有组件 1.当找组件的时候,相当于调用Ext.ComponentQue...
  • gksrxn
  • gksrxn
  • 2013年10月22日 15:46
  • 653

ExtJS4学习笔记(十四)--- ComponentQuery

对于Extjs3.x来说,Extjs4.0组件查找使用了ComponentQuery类,这个类是用来查找容器内的组件的。实现方式类似于CSS的Selector。在extjs3.x中,查找组件的方式有很...
  • sandykwx
  • sandykwx
  • 2013年01月17日 09:53
  • 138

Extjs4.2 选择器 Ext.ComponentQuery.query

基于xtype查找组件: var panels = Ext.ComponentQuery.query('panel');查找二级xtype:var buttons = Ext.ComponentQue...
  • HyEidolon
  • HyEidolon
  • 2014年08月22日 17:21
  • 7834

ExtJs4学习(三)组件查找 ComponentQuery类

Extjs3.x: ID:这就是所熟知的Ext.getCmp(“组件ID”),缺点是id重复导致出错。 ref:在EXTJS3中,所有的组件都会有一个ref属性,也就是reference的意...
  • dreamsunday
  • dreamsunday
  • 2014年11月20日 23:10
  • 3904

Extjs4中grid的增删改操作

Ext.define('JCY.app.controller.UserController',{ extend:'Ext.app.Controller', alias:'widget.userCo...
  • jcy472578
  • jcy472578
  • 2013年12月03日 13:34
  • 1171

extjs中的ComponentQuery方法

无标题文档 Ext.onReady(function(){ var viewport=Ext.create("Ext.container.Viewport",{ layout:"fit",...
  • pengxuan
  • pengxuan
  • 2016年02月16日 16:44
  • 518

eclipse extjs可视化插件

http://code.google.com/p/extbuilder/wiki/UserGuide#Kick_start可以参考这里,下载安装鄙视一下,安装完了以后什么都好了,就是不会用,以前的可视...
  • hnbcjzj
  • hnbcjzj
  • 2010年08月09日 13:47
  • 2643

Extjs4中Form之日期选择器datefield

Ext.onReady(function(){ Ext.QuickTips.init(); Ext.create("Ext.form.Panel",{ title:'本地combobox实例'...
  • jcy472578
  • jcy472578
  • 2013年11月25日 14:44
  • 1087

ExtJS4获取控件展示的信息---获取grid选中项信息

在表格定义的过程中,添加listensers监听器
  • a498089585
  • a498089585
  • 2014年06月18日 12:38
  • 588

ExtJS4 MVC开发教程:搭建开发环境

在所有的JS框架中,ExtJS算的上是一个超重量级的前端框架,里面封装了大量的类库以至于很多刚开始接触ExtJS的朋友们不知如何下手,即便是很多人看着别人的demo能够用ExtJS写出自己的Hello...
  • qq_17505335
  • qq_17505335
  • 2016年07月13日 23:21
  • 312
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Extjs4中的ComponentQuery
举报原因:
原因补充:

(最多只允许输入30个字)