zoukankan      html  css  js  c++  java
  • [ExtJS5学习笔记]第三十五条 sencha extjs 5 组件查询方法

    一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)');
    
  • 相关阅读:
    韩式英语
    Daily dictation 听课笔记
    words with same pronunciation
    you will need to restart eclipse for the changes to take effect. would you like to restart now?
    glottal stop(britain fountain mountain)
    education 的发音
    第一次用Matlab 的lamada语句
    SVN的switch命令
    String的split
    SVN模型仓库中的资源从一个地方移动到另一个地方的办法(很久才解决)
  • 原文地址:https://www.cnblogs.com/gcczhongduan/p/5047996.html
Copyright © 2011-2022 走看看