Results 1 to 5 of 5

Thread: Correct way to extend a class and override config properties

  1. #1

    Join Date
    Jul 2014
    Posts
    48
    Vote Rating
    1
      0  

    Default Answered: Correct way to extend a class and override config properties

    I need to create several charts of the same type and I created a base class using that code:

    Code:
    Ext.define('LabControl.view.indicadors.charts.Linies', {    
    extend: 'Ext.chart.CartesianChart',
        alias: 'lc.chart.linies',      
        requires: [        
    ...
        ],    
        width: 100,
        height: 250,
        insetPadding: 20,
        shadow: true,
        interactions: 'itemhighlight',
    ...
        constructor: function(config) {
            var me = this;      
            console.log("Creating Linies:"+config);
            console.log(config);        
            me.callParent(config);        
        }
     });
    Then I try to use the class using:

    Code:
        items: [ 
            {
                xclass : 'lc.chart.linies',
                width : 50,
                reference: 'mychart',
                ...
            }
        ],
    But the problem is that width or other properties that I specify aren't set to the created object and I only see the default values.

    Can someone guide me on what I'm doing incorrectly or direct me to some documentation that explians how to extend components and maange config properties

    A lot of thanks in advance,

  2. callParent requires an Array to be passed as an argument.
    Arguments is an array, so it works.
    If you change your code to:
    Code:
    this.callParent([config])
    it should work.

    Regards,
    TkDodo

  3. #2
    Sencha Premium Member glopes's Avatar
    Join Date
    Jan 2013
    Location
    Chicago
    Posts
    123
    Answers
    16
    Vote Rating
    32
      0  

    Default

    Change your constructor to:

    Code:
                constructor: function(config) {
                    var me = this;      
                    config.width = config.width || me.width || 200;
                    console.log("Creating Linies:", config);       
                    me.callParent(config);        
                }
    this will get the value passed as parameter... if none is set will use the class value... if the class doesnt have any value set, use 200 as default.

  4. #3

    Join Date
    Jul 2014
    Posts
    48
    Vote Rating
    1
      0  

    Default

    I make a mistake posting the message by not removing the config.width=200 in the constructor. I added it previously for debug purpouses and forgot to remove before post.

    But the real problem is that anything that I put in config isn't used, only the default values that are defined in lc.chart.linies (width 100 in my case) and the 50 that I place in the initializer is completely ignored.
    In fact if I remove the width 100 default value then nothing is displayed because 50 isn't used and the component has width=0

    PD: I correct my original post removing the mistake

    Quote Originally Posted by glopes View Post
    Change your constructor to:

    Code:
                constructor: function(config) {
                    var me = this;      
                    config.width = config.width || me.width || 200;
                    console.log("Creating Linies:", config);       
                    me.callParent(config);        
                }
    this will get the value passed as parameter... if none is set will use the class value... if the class doesnt have any value set, use 200 as default.

  5. #4

    Join Date
    Jul 2014
    Posts
    48
    Vote Rating
    1
      0  

    Default

    I've been investigating with that fiddle and found that the problem is with the constructor. Using

    Code:
        constructor: function(config) {
            this.callParent(config)
        }
    doesn't works but changing to :

    Code:
        constructor: function(config) {
            this.callParent(arguments)
        }
    works correctly.

    I don't understand the internals of why the first variant doesn't works, looking at arguments I see that three or four are pased but doesn't understand the internals. Some one can give me some light? I've always to call callParent(arguments)?

  6. #5
    Sencha Premium Member
    Join Date
    Mar 2013
    Posts
    22
    Answers
    1
    Vote Rating
    8
      1  

    Default

    callParent requires an Array to be passed as an argument.
    Arguments is an array, so it works.
    If you change your code to:
    Code:
    this.callParent([config])
    it should work.

    Regards,
    TkDodo

Posting Permissions

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