Ext 关于initConponent

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

view sourceprint?

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 sourceprint?

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.希望这个例子能让你稍微明白代码执行的顺序（而不是按照你读代码的顺序！）。