码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-03-16 17:54:34      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:extjs   sencha   

一个UI前台组件肯定会比较多,我们通常习惯性的使用ID来获取需要操作的组件,但是这种方法是extjs推荐的么?有没有extjs推荐使用的获取组件的方法呢?

目录

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)‘);

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

标签:extjs   sencha   

原文地址:http://blog.csdn.net/sushengmiyan/article/details/44307295

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!