一UI前部组件势必更加,我们通常习惯性使用ID获取部件操作的需要。但是,这种方法是extjs推荐么?你有吗extjs利用它来获取组件的推荐方法?
夹
- 文件夹
- extjs的查询组件的API
- 查询实例
- 主要的组件查询
- 组件树查询
- 通过组件的属性检索
- 属性匹配操作符
- 逻辑运算的
- 官方案例
extjs的查询组件的API
组件查询API文档地址:5.1.0-apidocs/#!/api/Ext.ComponentQuery-method-query
能够看到是使用的Ext.ComponentQuery这个单例的query方法来进行查询的。
查询实例
主要的组件查询
查询xtype组件
prevField = myField.previousNode('textfield');
这表示查询全部 textfield 以及继承自TextField的组件都会被查询。
prevTextField = myField.previousNode('textfield(true)');
这表示仅仅查询TextField类的。其它继承类不用去查询。仅仅须要传入true表示严格查询就可以。
ID或者ItemID查找
#myContainer
当须要查询ID定义的组件的时候。能够使用#来查询。xtype和ID或者ItemID组合使用
panel#myPanel
这样能够尽可能的降低ID带来的冲突,对xtype进行了一次过滤。
组件树查询
看以下一个查询实例:
window[title="Input form"] textfield[name=login] ^ form > button[action=submit]
语句从左到右运行,运行完毕一个,就依照当前找到的那个再接着往下运行。所以这句话的意思是:
找到标题为Iput form的window的叫做login的textfield的父窗口中button的提交名称为submit的那个按钮。
通过组件的属性检索
上述样例就能够看到 当查询title为Input form的window的时候就是使用的组件的属性。
属性匹配操作符
- =
表示严格等于 。 - ~=
表示仅仅要搜索到检索词就可以。 - ^=
表示以什么什么 开头 - $=
表示以什么什么结尾的 - /=
表示支持正則表達式的
逻辑运算的
and逻辑
Ext.ComponentQuery.query('panel[cls~=my-cls][floating=true][title$="sales data"]');
这样的类型的是表示逻辑and
or逻辑
Ext.ComponentQuery.query('field[fieldLabel^=User], field[fieldLabel*=password]');
官方案例
// retrieve all Ext.Panels in the document by xtypevar panelsArray = Ext.ComponentQuery.query('panel');// retrieve all Ext.Panels within the container with an id myCtvar panelsWithinmyCt = Ext.ComponentQuery.query('#myCt panel');// retrieve all direct children which are Ext.Panels within myCtvar directChildPanel = Ext.ComponentQuery.query('#myCt > panel');// retrieve all grids or treesvar gridsAndTrees = Ext.ComponentQuery.query('gridpanel, treepanel');// Focus first ComponentmyFormPanel.child(':focusable').focus();// Retrieve every odd text field in a formmyFormPanel.query('textfield:nth-child(odd)');// Retrieve every even field in a form, excluding hidden fieldsmyFormPanel.query('field:not(hiddenfield):nth-child(even)');