[Ext JS 4] The difference between the InitComponent and the constructor of ExtJS

Source: Internet
Author: User

what are initcomponent and constructor?

The components provided by ExtJS are quite rich, but sometimes the demand is richer.

When the ExtJS native component fails to fulfill our requirements, it is necessary to extend the ExtJS components to implement the self-made components.

In addition to this use situation, sometimes for some of the same but have a lot of configuration, it may be like to separate it, set as a separate component for everyone to call, save development time and improve code reuse.

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

ext.define Implementing Extensions

Using ext.define for extension in ExtJS, InitComponent and constructor are used in a similar way

Ext.define (' Ext.oscar999.button.MyButton ', {extend: ' Ext.button.Button ', initcomponent:function () {//do something}, Constructor:function () {//do Something}});

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

(Extended with Ext.extend in the old ExtJS version)

So how do these two usages work? What is the difference between the use of the two?

InitComponent and constructor are different from the contact

1. 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 the constructor.

Take a look at the ext.abstractcomponent source file Src/abstractcomponent.js

The initcomponent is called in the constructor method


1) callparent () must be called in the InitComponent function in the custom class, otherwise the caller cannot initialize the object

2) for extension components such as button, the constructor in the custom class needs to call Callparent (arguments), otherwise the caller cannot initialize the object

This.callparent (arguments);
The arguments here is needed.

(In versions prior to ExtJS 4, you might see more XXX.superclass.constructor.call notation)

Sencha's official website has a discussion of these two differences:


However, the grammar is based on ExtJS three discussions, I think the role is not very large.

In the actual development experience of the author, basically using initcomponent can achieve the development requirements.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.