EXTJS4 ComponentQuery

EXTJS4发布有一段时间了，最近也一直在关注EXTJS4中的一些新的知识点，本节咱们一起来看一下ExtJS4中的ComponentQuery类，这个类是用来查找容器内的组件的。实现方式类似于CSS的Selector。还记得我们在EXT3中查找组件的方式也有很多种，比如说，利用（ID）、(ref引用)、（items.get(0)利用组件的层级）。在EXTJS4中我们将会又要多一种方式。来获得我们想要的组件，这就是用我们ComponentQuery，当然，EXTJS3中的方式，我们也可以继续沿用。但是在EXTJS4中，我们将看不到（ref引用）这种方式。下面咱们来简单的介绍一下，各个方式的使用，也对个方式做一个简单的对比。

 

//EXTJS3中的方式

 

1、（ID）获取组件：

这种方式不用多说，就是通过组件的一个唯一标示（ID），获得组件对象。例:Ext.getCmp("ComponentID");

这种方式，在应用程序的应用过程中。容易忽略的是，第一。有时候，我们随着组件的数量，而产生重名的组件，这样就会造成显示和获得组件对象上的不正常。这也是这种方式的最需要注意的地方，一定要保证ID不能重复。否则，这种获得方式，就会失效。

 

2、（ref引用）获取组件：

在EXTJS3中，所有的组件都会有一个ref属性，也就是reference的意思。这种方式，是通过引用来找到组件对象，使用方式，很类似于ID方式的使用（ref:"test"），这种方式，比起第一种方式，好处在于，ref的名称可以重复，但是。重复需要加一个条件，就是在不同的层级之间，也就说（A[a,b,c]B[a,d,e]）.这样页面中两个组件A、B中都有a组件是可以的，但是。这样（A[a,a,b]）的定义是不行的。同一层级出现两个a组件。这也是这种方式在使用中注意的地方

 

3、（items.get(0)）获取组件:

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

 

 

以上就是我们在EXTJS3中通常用来获得组建的方式。下面我们就来看一下。EXTJS4中的ComponentQuery类。使用它，咱们怎么来获得组件对象。

 

//EXTJS4中的方式

 

ComponentQuery类

该类是用来查找当前容器内的组件。使用方式有点和CSS Selector类似。我们先来介绍一下，该类在使用时的基本格式。

 

1、如果我们想通过EXTJS的xtype得到组件。格式为：

“gridpanel”或者“.gridpanel”

 

2、如果我们想通过组件的ID获得组件。那么我们必须在ID之前添加#标识。格式为:

"#ComponentID"

 

3、如果我们想获得panel中所有的button。格式为:

"panel>button"

 

4、如果我们想获得容器中所有panel，并且autoscroll属性为true的panel。格式为：

"panel[autoScroll=true]"

 

//示例代码

 

//针对第一种场景

Ext.ComponentQuery.query("gridpanel");

 

//针对第二种场景

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

 

//针对第三种场景

Ext.ComponentQuery.query("panel>button");

 

//针对第四种场景 

Ext.ComponentQuery.query("panel[id=test]");

 

 

上边就是ComponentQuery使用的基本的场景及实例，在我们实际的应用中，我们往往会集中方式合并一起使用。才能达到我们的目的。在ExtJS4中所有的组件都有一个query方法，这个方法就是ComponentQuery的实现。我们可以使用上述的方式，查询出组件对象。到目前为止，就是我们本节的所有内容。如果大家有什么问题，或者是好的方式。欢迎到家给我留言。我们一起学习，共同进步，谢谢。