首页 > 代码库 > 【ExtJS】关于constructor、initComponent、beforeRender

【ExtJS】关于constructor、initComponent、beforeRender

2024-07-23 11:49:25   219人阅读

　　ExtJS提供的组件非常丰富，不过当原生的组件无法满足要求时，就需要扩展原生自定义组件了。

　　initComponent 和 constructor 就是Extjs 提供用来实现继承和扩展的方式。

　　在Extjs 中使用Ext.define来实现扩展， initComponent 和 constructor的使用方式类似:

1 Ext.define(‘My.panel.Panel‘, {  2     extend : ‘Ext.panel.Panel‘,  3     initComponent : function() {  4         //do something  5     },  6     constructor : function() {  7         //do something  8     }  9 });

　　一般状况上，加上 xtype 的定义， 类似:

 1 Ext.define(‘My.panel.Panel‘, {   2     extend : ‘Ext.panel.Panel‘, 3     xtype: ‘myPanel‘, 4     initComponent : function() {   5         //do something   6     },   7     constructor : function() {   8         //do something   9     }  10 });

　　initComponent这个方法是在Ext.Component的构造函数(constructor)中调用的，只有直接或间接继承自 Ext.Component的类才会在constructor里调用initComponent方法。

　　自定义类中的 initComponent　函数中必须调用 callParent();否则 调用者无法初始化这个对象。

　　针对button 这样的扩展组件来说，自定义类中的  constructor ，需要调用callParent( arguments);否则 调用者无法初始化这个对象。

　　在下面的例子中：

 1 Ext.define(‘My.form.Panel‘,{ 2     extend: ‘Ext.panel.Panel‘, 3     xtype: ‘form-panel‘, 4      5     title: ‘form-panel‘, 6     width: 400, 7     height: 300, 8      9     defaultType: ‘textfield‘,10     11     items: [{12         allowBlank: false,13         fieldLabel: ‘Name:‘,14         name: ‘name‘,15         emptyText: ‘Name ID‘16     },{17         allowBlank: false,18         fieldLabel: ‘Password:‘,19         name: ‘password‘,20         emptyText: ‘password‘,21         inputType: ‘password‘22     },{23         xtype: ‘checkbox‘,24         fieldLabel: ‘Sex‘,25     }],26     buttons: [{27         text: ‘OK‘28     },{29         text: ‘Cancel‘30     }],31     32     constructor: function(){33         this.renderTo = Ext.getBody();34         this.callParent(arguments);35         Ext.Msg.alert(‘constructor‘,‘Constructor!‘);36     },37     38     initComponent: function(){39         Ext.Msg.alert(‘InitComponent‘,‘InitComponent!‘);40         var me = this;41         me.defaults = {42             anchor: ‘100%‘,43             labelWidth: 10044             45         };46         me.callParent();47     48     },49     50     beforeRender: function(){51         Ext.Msg.alert(‘beforRender‘,‘beforerender!‘);52         this.callParent();53     }54 })55 56 Ext.onReady(function(){57     Ext.create(‘My.form.Panel‘).show();58 59 })

　　对容器的renderTo一般写在constructor中，如果写在initComponent中，则配置对象为容器内的几个组件。

　　而对于容器内的几个组件的默认配置，则一般写在initComponent内。

　　通过分别在constructor、initComponent、beforeRender中加入输出语句实验发现，三者的调动顺序为constructor --> beforeRender --> initComponent。

　　通过对ExtJS的生命周期的了解，在初始化阶段，首先调用了构造器constructor,一般从  Component 继承下来的类并不需要提供（通常没有提供）一个独立的构造器。然后是各种事件的创建以供各组件的调用，随后是在 ComponentMgr 中注册组件实例，从而可以通过 Ext.getCmp 被获得实例引用，然后调用initComponent 方法，这是一个最重要的初始化步骤，它是做为一个模板方法，子类可以按需要重写这个方法。最后呈现阶段， 如果有配置 renderTo 或 applyTo，组件会马上被呈现输出，否则，它会被延迟输出，直
到组件被显式调用显示，或被它的容器所调用输出。而beforeRender是在组件渲染 rendered之前触发，一般扩展的新组件与元素的初始化配置，就写在beforeRender内。

【ExtJS】关于constructor、initComponent、beforeRender


联系
我们