[ExtJS5学习笔记]第三十五条 sencha extjs 5 组件查询方法

一UI前部组件势必更加，我们通常习惯性使用ID获取部件操作的需要。但是，这种方法是extjs推荐么？你有吗extjs利用它来获取组件的推荐方法？

夹

• 文件夹
  • extjs的查询组件的API
  • 查询实例
    • 主要的组件查询
    • 组件树查询
    • 通过组件的属性检索
    • 属性匹配操作符
    • 逻辑运算的
  • 官方案例

extjs的查询组件的API

组件查询API文档地址：5.1.0-apidocs/#!/api/Ext.ComponentQuery-method-query

能够看到是使用的Ext.ComponentQuery这个单例的query方法来进行查询的。

查询实例

主要的组件查询

1. 查询xtype组件

   prevField = myField.previousNode('textfield');
   

   这表示查询全部 textfield 以及继承自TextField的组件都会被查询。

   prevTextField = myField.previousNode('textfield(true)');
   

   这表示仅仅查询TextField类的。其它继承类不用去查询。仅仅须要传入true表示严格查询就可以。

2. ID或者ItemID查找

   #myContainer
   
   当须要查询ID定义的组件的时候。能够使用#来查询。

3. 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的时候就是使用的组件的属性。

属性匹配操作符

1. =
   
   表示严格等于 。

2. ~=
   
   表示仅仅要搜索到检索词就可以。
3. ^=
   
   表示以什么什么 开头
4. $=
   
   表示以什么什么结尾的
5. /=
   
   表示支持正則表達式的

逻辑运算的

1. and逻辑

   Ext.ComponentQuery.query('panel[cls~=my-cls][floating=true][title$="sales data"]');
   

这样的类型的是表示逻辑and

1. or逻辑

   Ext.ComponentQuery.query('field[fieldLabel^=User], field[fieldLabel*=password]');
   

官方案例

    // retrieve all Ext.Panels in the document by xtype
    var panelsArray = Ext.ComponentQuery.query('panel');

    // retrieve all Ext.Panels within the container with an id myCt
    var panelsWithinmyCt = Ext.ComponentQuery.query('#myCt panel');

    // retrieve all direct children which are Ext.Panels within myCt
    var directChildPanel = Ext.ComponentQuery.query('#myCt > panel');

    // retrieve all grids or trees
    var gridsAndTrees = Ext.ComponentQuery.query('gridpanel, treepanel');

    // Focus first Component
    myFormPanel.child(':focusable').focus();

    // Retrieve every odd text field in a form
    myFormPanel.query('textfield:nth-child(odd)');

    // Retrieve every even field in a form, excluding hidden fields
    myFormPanel.query('field:not(hiddenfield):nth-child(even)');