Sencha touch 2通过Ext.ComponentQuery.query查找组件

    在做Sench touch开发时，想要获取某个组件并对其操作，通常使用Ext.getCmp('id')；该方式是在整个DOM文档中进行查询，后来发现随着项目的进行，使用的组件愈多，这种方式势必影响查询效率，于是想使用一种更好地方式来查询组件以替代Ext.getCmp()。

   现有一种方式可实现这种目的：

   如：创建一组件

   {

       xtype: 'button'

       itemId : 'buttonItemId',

   }

   通过Ext.ComponentQuery.query()获取组件：

   var comp = Ext.ComponentQuery.query("button[itemId='buttonItemId']")[0];   

    //Ext.ComponentQuery.query()返回的是控件数组,[0]返回的是该控件

    //[注：有关Ext.ComponentQuery.query()方法使用查看Sencha touch API文档]

 

    另外，还有一种方法获取组件，且效率较高：

    先通过Ext.ComponentQuery.query()，获取组件所在页面。

    var view = ComponentQuery.query('component_xtype')，  // component_xtype页面类型

    若要查找该页面id为：buttonId的组件，可用下面方法：

    var comp2 = view.down('#buttonId')；

    通过这种方式查询组件，首先其范围限制到该组件所在的页面里，所以查询效率高。

   

评论

1 楼 cjpx00008 2014-04-02  

sencha touch中getCmp其实是组件查找中最效率的，读过源码的话就知道，sencha touch在定义视图组件的时候会在componentManager中给每个组件注册一个id，并将组件保存在一个map对象中，id就是这个对象的属性，而组件对象就是这个属性的值，getCmp（id）所做的操作就是调用map[id]，这样就直接得到了组件对象的值，对象的属性访问在js中时相当效率的，

相反，Ext.ComponentQuery.query()才是要在内存中遍历所有组件对象，效率相对getCmp来说要差很多