Ext 关于initConponent

下面的模板（基于Jozef Sakalos在mjlecomte's帖子中的回复）可作为扩展Ext.Component的起点。

view source print ?

01. MyComponent = Ext.extend(Ext.some.component, {

02.     //缺省构造参数，可被自定义设置覆盖

03.     propA: 1,

04.   

05.     initComponent: function(){

06.        //在组件初始化期间调用的代码

07.   

08.         //因为配置对象应用到了“this”，所以属性可以在这里被覆盖，或者添加新的属性

09.         //（如items,tools,buttons）

10.         Ext.apply(this, {

11.             propA: 3

12.         });

13.   

14.        //调用父类代码之前       

15.   

16.         //调用父类构造函数（必须）

17.         MyComponent.superclass.initComponent.apply(this, arguments);

18.   

19.        //调用父类代码之后

20.         //如：设置事件处理和渲染组件

21.     },

22.   

23.     //覆盖其他父类方法

24.     onRender: function(){

25.   

26.         //调用父类代码之前

27.   

28.         //调用父类相应方法（必须）

29.         MyScope.superclass.onRender.apply(this, arguments);

30.   

31.         //调用父类代码之后

32.   

33.     }

34. });

35.   

36. //注册成xtype以便能够延迟加载

37. Ext.reg('mycomponentxtype', MyComponent);

上面是一个启发例子，如果你用以下任意例子创建以上代码的实例 ：

view source print ?

1. var myComponent = new MyComponent({

2.     propA: 2

3. });

4. //或者延迟加载:

5. {..

6.   items: {xtype: 'mycomponentxtype', propA: 2}

7. ..}

属性propA将被设置3次，按顺序分别是1，2，3 。通过跟踪代码（和注释） ，你会发现初始值为1（构造缺省），然后通过用户配置对象设置为2，最后在initComponent方法中被覆盖设置成3.希望这个例子能让你稍微明白代码执行的顺序（而不是按照你读代码的顺序！）。

转载于:https://www.cnblogs.com/wsm1991/p/3448062.html