Extjs学习(三)组件查找 ComponentQuery类

页面导航:首页 > 网络编程 > JavaScript > Extjs学习(三)组件查找 ComponentQuery类

Extjs学习(三)组件查找 ComponentQuery类

来源: 作者: 时间:2016-02-05 11:06 【

Extjs3 x:ID:这就是所熟知的Ext getCmp(组件ID),缺点是id重复导致出错。ref:在EXTJS3中,所有的组件都会有一个ref属性,也就是reference的意思。这种方式是通过对组件的引用而得到组件对象

Extjs3.x:


ID:这就是所熟知的Ext.getCmp(“ID”),缺点是id重复导致出错。


ref:在EXTJS3中,所有的组件都会有一个ref属性,也就是reference的意思。这种方式是通过对组件的引用而得到组件对象。例如:ref:’mypanel’,但是这种方式的局限性在于,他只能查找不同层级之间的组件。也就是说A[a,b,c] C[d,e,f],这样的方式,使用ref非常方便,但如果是B[c,c,d]这样的方式,就会出现问题,因为在某一层级上,出项了两个相同的组件。


items.get(0):这种方式是通过首先获得组件中所有元素的数组,然后通过数组获得想要的组件对象,一般不会用到,因为非常不灵活,如果元素层级发生改变的话,将不能获取想要的组件,维护起来也非常困难。所以,这种方式,是用的最少的一种方式。


Extjs4.x:


在Extjs4.0中,依然可以沿用Extjs3.x中查找组件的方式,但是在Extjs4.0中,可以利用ComponentQuery,更方便找到对应组件。


1、 通过组件ID获取组件:"#组件ID”,如果通过这种方式,那么一定要记住在组件ID前添加#号。

[javascript] view plaincopyprint?
  1. // 通过ID获得组件:#ID // var items = Ext.ComponentQuery.query('#btn2',panel);
      // 通过ID获得组件:#ID
      //   var items = Ext.ComponentQuery.query('#btn2',panel);

2、 得到某一组件下所有的指定类型的组件:"panel>button”,这种方式是查找所有panel组件下的所有button组件。

[javascript] view plaincopyprint?
  1. // 获得panel下的所有button,这个需要注意,button必须在panel下的第一层,如果中间跨层是找不到的,如:'viewport>button'是找不到button的,因为中间有一层panel // var items = Ext.ComponentQuery.query('panel>button',panel);
      // 获得panel下的所有button,这个需要注意,button必须在panel下的第一层,如果中间跨层是找不到的,如:'viewport>button'是找不到button的,因为中间有一层panel
      //   var items = Ext.ComponentQuery.query('panel>button',panel);

3、 通过xtype:"treepanel”或".treepanel

[javascript] view plaincopyprint?
  1. // 如果是多个类别,可以逗号隔开,如:'gridpanel,treepanel' var items = Ext.ComponentQuery.query('button',panel);
      	// 如果是多个类别,可以逗号隔开,如:'gridpanel,treepanel'
    // var items = Ext.ComponentQuery.query('button',panel);

4、如果想获取所有button并且action为save的button,则可以使用"button[action=save] ",又或者获取所有panel,并且autoscroll属性为true的panel,则可以使用"panel[autoScroll=true]"

[javascript] view plaincopyprint?
  1. // 通过组件的属性来查找 // var items = Ext.ComponentQuery.query('button[id=btn2]',panel);
      // 通过组件的属性来查找
      //   var items = Ext.ComponentQuery.query('button[id=btn2]',panel);

note:通过属性查找的时候中括号要紧挨着类名,如上据代码button和[id=btn1]之间不能有空格!

5、还有两种方式,是查找某一组件的子组件或上级组件,例如:


[javascript] view plaincopyprint?
  1.   1、查找window下的form:win.down(“form”)   2、查找button的父组件window:button.up(“window”);
      1、查找window下的form:win.down(“form”)
      2、查找button的父组件window:button.up(“window”);

最明显的例子就是在extjs4.0使用MVC模式进行开发的时候,经常会在control控制中大量使用'viewport > panel',’edit button[action=save]’这类查找,当点击button进行数据保存的时候,会使用

[javascript] view plaincopyprint?
  1. var win = button.up('window'), form = win.down('form'),
  2. record = form.getRecord(),
    var win   = button.up('window'),  
     form   = win.down('form'), 
    record = form.getRecord(),

这类型的查找进行数据更新。

最后,在extjs4.0 MVC模式中,经常会碰到

[javascript] view plaincopyprint?
  1. refs:[ {ref: 'menu',selector: 'tablepanel'},
  2. {ref: 'feedList', selector: 'feedlist'}, {
  3. ref: 'feedWindow', selector: 'feedwindow',
  4. autoCreate: true, xtype: 'feedwindow'
  5. } ]
    refs:[
        {ref: 'menu',selector: 'tablepanel'},
        {ref: 'feedList', selector: 'feedlist'},
        {
            ref: 'feedWindow', 
            selector: 'feedwindow', 
            autoCreate: true,
            xtype: 'feedwindow'
        }
    ]

这样的书写方式。有很多人问我这是什么意思,查API也找不到。网络上也找不到,其实看extjs3.x中查找组件的方式,就会明白了。Refs是一个查找并匹配组件的集合,集合里面则指定了需要的操作,即查找一个组件,而找到的这个组件所匹配组件就是selector指定的,用上面代码一条

{ref: 'menu',selector: 'tablepanel'}

来稍做解释,即查找menu组件(其实是一颗树),点击树节点,结果将在'tablepanel'中渲染。这样解释可能比较含糊,那么就用官方例子做个解释吧。

{ref: 'feedData', selector: 'feedlist dataview'}。

这条的含义是查找'feedData',将'feedData'渲染在'feedlist的子组件dataview'上。

总结下:在ExtJS4中所有的组件都有一个query方法,这个方法就是ComponentQuery的实现。当然,如果还是不明白的话,就可以使用:

Ext.ComponentQuery.query("tabpanel");

Ext.ComponentQuery.query("#mytree");

实在extjs4.0实际使用过程中,如果要调用或查找组件,exjts会自动调用ComponentQuery的query方法来查找对应组件。

例子:

init:function(){

this.control({

'smsmenu': {//这里不必写全部的代码Ext.ComponentQuery.query(…);

itemmousedown: this.loadMenu

}

})

}

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<