Results 1 to 3 of 3

Thread: initComponent usage clarification

  1. #1
    Sencha Premium Member CSchmitz81's Avatar
    Join Date
    Nov 2012
    Location
    Saint Louis
    Posts
    118
    Answers
    6

    Default Answered: initComponent usage clarification

    I'm wanting to nail down the concept of "when you should use initComponent" when defining a class.

    Based on the explanation in the documentation, I would assume that you should use initComponent when parts of your class require config data that would be provided by the part of your application that is instantiating the class. e.g.

    Code:
    Ext.define('MyApp.MyView', {
            extend: 'Ext.panel.Panel',
    
    
            config: {
                title: 'default title',
                html: 'test'
            },
    
    
            renderTo: Ext.getBody(),
            
            initComponent: function (){
                var me = this;
    
    
                me.title = "Dynamically set title: " + me.title;
                this.callParent();
            }
    
    
        });
    
    
    
    
        Ext.application({
            name : 'Fiddle',
    
    
            launch : function() {
                Ext.create('MyApp.MyView', {title: 'new title', html: 'Worked'});
            }
        });
    In the case of the MyView class, you can't properly set the title of the panel to "Dynamically set title: new title" unless you use initComponent. If you tried to write it this way:

    Code:
    Ext.define('MyApp.MyView', {
            extend: 'Ext.panel.Panel',
    
    
            config: {
                title: 'Dynamically set title:',
                html: 'test'
            },
    
    
            renderTo: Ext.getBody(),
    
    
        });
    
    
    
    
        Ext.application({
            name : 'Fiddle',
    
    
            launch : function() {
                Ext.create('MyApp.MyView', {title: 'new title', html: 'Worked'});
            }
        });
    The title would just be "new title" because the configuration object passed in at instantiation overrode the default title.


    That makes sense to me, but when I look at the example given in the documentation it makes me think I'm missing something.

    The example in the docs for initComponent is:

    Code:
    Ext.define('DynamicButtonText', {
        extend: 'Ext.button.Button',
    
    
        initComponent: function() {
            this.text = new Date();
            this.renderTo = Ext.getBody();
            this.callParent();
        }
    });
    
    
    Ext.onReady(function() {
        Ext.create('DynamicButtonText');
    });
    But you can accomplish the same thing successfully without the initComponent call:

    Code:
    Ext.define('DynamicButtonText', {
        extend: 'Ext.button.Button',
    
    
        text : new Date(),
        renderTo : Ext.getBody()
        
    
    
    });
    
    
    Ext.onReady(function() {
        Ext.create('DynamicButtonText');
    });
    Is there some other reason why you would use the initComponent method call for the DynamicButtonText example that I'm missing?

  2. Code:
    Ext.define('DynamicButtonText', {
        ...
        text : new Date(),
        ...
    });
    In this example you're creating the Date object when the class is defined and sharing it via the prototype between all instances of the class. Setting the text in initComponent would only create the Date object when the button is instantiated and different instances of the button would have different Dates.

    Written for ExtJS 4 but somewhat relevant:

    http://skirtlesden.com/articles/conf...-the-prototype

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    Code:
    Ext.define('DynamicButtonText', {
        ...
        text : new Date(),
        ...
    });
    In this example you're creating the Date object when the class is defined and sharing it via the prototype between all instances of the class. Setting the text in initComponent would only create the Date object when the button is instantiated and different instances of the button would have different Dates.

    Written for ExtJS 4 but somewhat relevant:

    http://skirtlesden.com/articles/conf...-the-prototype

  4. #3
    Sencha Premium Member CSchmitz81's Avatar
    Join Date
    Nov 2012
    Location
    Saint Louis
    Posts
    118
    Answers
    6

    Default

    Ah, awesome. Thanks for the explanation. That definitely adds another level of clarity for me.

Similar Threads

  1. clarification about initComponent constructor callParent
    By maneljn in forum Ext: Discussion
    Replies: 3
    Last Post: 3 Jul 2011, 12:19 AM
  2. Replies: 0
    Last Post: 4 Apr 2011, 1:08 AM
  3. Replies: 0
    Last Post: 1 Jul 2010, 4:50 AM
  4. Need clarification
    By saied_hai2006 in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 4 Sep 2009, 7:45 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •