"ExtJS" about constructor, InitComponent, BeforeRender

ExtJS provides a rich set of components, but when native components do not meet the requirements, they need to be extended to native custom components.

InitComponent and constructor are ExtJS provide a way to implement inheritance and extension.

Using Ext.define in ExtJS to implement extensions, InitComponent and constructor are used in a similar way:

1Ext.define (' My.panel.Panel ', {  2Extend: ' Ext.panel.Panel ',  3InitComponent:function() {  4         //Do something5     },  6Constructor:function() {  7         //Do something8     }  9});

The general situation, coupled with the definition of xtype, resembles:

1Ext.define (' My.panel.Panel ', {  2Extend: ' Ext.panel.Panel ',3Xtype: ' Mypanel ',4InitComponent:function() {  5         //Do something6     },  7Constructor:function() {  8         //Do something9     }  Ten});

InitComponent This method is called in the Ext.component Constructor (constructor), and only directly or indirectly inherits from the The Ext.component class will only invoke the InitComponent method in constructor.

The InitComponent function in the custom class must call Callparent (), otherwise the caller cannot initialize the object.

For an extension component such as button, the constructor in the custom class needs to call Callparent (arguments), otherwise the caller cannot initialize the object.

In the following example:

1Ext.define (' My.form.Panel ',{2Extend: ' Ext.panel.Panel ',3Xtype: ' Form-panel ',4     5Title: ' Form-panel ',6width:400,7height:300,8     9DefaultType: ' TextField ',Ten      One items: [{ AAllowblank:false, -Fieldlabel: ' Name: ', -Name: ' Name ', theEmptytext: ' Name ID ' -     },{ -Allowblank:false, -Fieldlabel: ' Password: ', +Name: ' Password ', -Emptytext: ' Password ', +InputType: ' Password ' A     },{ atXtype: ' checkbox ', -Fieldlabel: ' Sex ', -     }], - buttons: [{ -Text: ' OK ' -     },{ inText: ' Cancel ' -     }], to      +Constructorfunction(){ -          This. Renderto =ext.getbody (); the          This. Callparent (arguments); *Ext.Msg.alert (' constructor ', ' constructor! '); $     },Panax Notoginseng      -InitComponent:function(){ theExt.Msg.alert (' initcomponent ', ' initcomponent! '); +         varme = This; AMe.defaults = { theAnchor: ' 100% ', +labelwidth:100 -              $         }; $ me.callparent (); -      -     }, the      -BeforeRender:function(){WuyiExt.Msg.alert (' Beforrender ', ' beforerender! '); the          This. Callparent (); -     } Wu }) -  AboutExt.onready (function(){ $Ext.create (' My.form.Panel '). Show (); -  -})

The Renderto of the container is generally written in constructor, and if written in InitComponent, the configuration object is a few components within the container.

For the default configuration of several components within a container, it is generally written within initcomponent.

By adding output statements in constructor, InitComponent, and BeforeRender respectively, it was found that the order of the three was constructor--and BeforeRender-- InitComponent.

By understanding the life cycle of the ExtJS, in the initialization phase, the constructor constructor is called first, and the classes generally inherited from Component do not need to provide a separate constructor (usually not provided). Then is the creation of various events for the call of each component, followed by registering the component instance in componentmgr, so that the instance reference can be obtained through EXT.GETCMP, and then call the InitComponent method, which is one of the most important initialization steps, It is done as a template method, and subclasses can override this method as needed. The final rendering phase, if there is a configuration Renderto or ApplyTo, the component will be rendered immediately, otherwise, it will be delayed output, straight
To the component being explicitly called, or by the output called by its container. The BeforeRender is triggered before the component renders rendered, and the general extension of the new component and the initialization configuration of the element is written in BeforeRender.

"ExtJS" about constructor, InitComponent, BeforeRender