Extjs获取组件的方法
2015-07-26 17:08
681 查看
分类: EXTJS4 |
//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的实现。我们可以使用上述的方式,查询出组件对象。到目前为止,就是我们本节的所有内容。如果大家有什么问题,或者是好的方式。欢迎到家给我留言。我们一起学习,共同进步,谢谢。
分类: EXTJS4 |
//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的实现。我们可以使用上述的方式,查询出组件对象。到目前为止,就是我们本节的所有内容。如果大家有什么问题,或者是好的方式。欢迎到家给我留言。我们一起学习,共同进步,谢谢。
相关文章推荐
- JavaScript中String方法
- Servlet+JSP 原理
- js自定义插件-选项卡
- JS闭包
- 【实例】javascript中使用event.target获取触发该事件标签的相关数据而不是通过document
- JSP之param动作
- JS 解析XML文件
- JSP之forward动作
- JSP 获取真实IP地址的代码
- 【bzoj1031】【JSOI2007】【字符加密Cipher】
- JSP学习笔记(四):点击按钮跳转到action
- JSP之include指令和动作
- JavaScript 基础 二
- JavaScript:删除节点(removeChild)该留意的一点
- 理解JavaScript闭包
- JSON解析:NSData转数组,通过字典转模型的具体实现
- js设置元素的onclick传参方法
- js获取节点
- jsoup抓取豆瓣美女
- 全面理解面向对象的 JavaScript