You found a bug! We've classified it as EXTJS-10701 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Jan 2011
    Location
    London, UK
    Posts
    50
    Vote Rating
    2
    welshcathy is on a distinguished road

      0  

    Default 4.2.1 Constructor overwrites changes to config property made in apply method

    4.2.1 Constructor overwrites changes to config property made in apply method


    I want to use the apply<ConfigName>( ) method to make changes to the property value.

    But if there is a value set to the config property when my component is initialised - any changes made in apply<ConfigName>( ) are reset as constructor.callParent( ) calls Ext.AbstractComponent.constructor( ) which reapplies values from the initial config object.

    Simplified example - call to create a component with an explicit value defined for the config property.
    Code:
    config: {
        bugTitle: 'New Title'
    }
    The component wants to add additional stuff to any title
    Code:
        applyBugTitle: function(bugTitle){
            if (bugTitle){
                return bugTitle + ' -> applyBugTitle';
            }
        },
    This happens in the component constructor
    Code:
        constructor: function(config){
            var me = this;
            // config.bugTitle : 'New Title'
            // me.bugTitle : undefined
    
    
            me.initConfig(config);
            // me.bugTitle : 'New Title -> applyBugTitle'
    
    
            me.callParent(arguments);  // initComponent is called as part of this 
            // me.bugTitle : 'New Title'
        }
    Then any logic in initComponent( ) will be using the wrong values.
    This is much more trivial than my actual scenario but serves to illustrate the bug.

    I have a work around - I moved all initComponent logic into the constructor and moved callParent before initComponent.

    See attached zip for code to replicate this.

    Generate a new Ext. 4.2.1 application using sencha generate app then copy the 2 files in the zip into application/app/view/ and replace the generated files.
    Attached Files

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,079
    Vote Rating
    186
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    I wonder if this is just a matter of order of operations. Can you try the below modified definition + instance and see if it works as expected. Looks like it works ok for me.

    Code:
    Ext.define('Bug.view.Main', {
        extend: 'Ext.container.Container',
        requires:[
            'Ext.tab.Panel',
            'Ext.layout.container.Border'
        ],
    
    
        xtype: 'app-main',
    
    
        layout: {
            type: 'hbox'
        },
    
    
        config: {
            /**
             * bugTitle is changed in the applyBugTitle method
             * but then is overridden in
             * this.constructor -> this.callParent -> Ext.AbstractComponent.construtor
             *
             * @type {String}
             */
            bugTitle: undefined,
    
    
            /**
             * This scenario works ok as there is no value set to happyTitle by the
             * Viewport as it calls this component
             */
            happyTitle: undefined
        },
    
    
        applyBugTitle: function(bugTitle){
            if (bugTitle){
                return bugTitle + ' -> applyBugTitle';
            }
            else{
                return ' -> applyBugTitle';
            }
        },
    
    
        applyHappyTitle: function(happyTitle){
            if (happyTitle){
                return happyTitle + ' -> applyHappyTitle';
            }
            else{
                return ' -> applyHappyTitle';
            }
        },
    
    
        constructor: function(config){
            var me = this;
    
    
            me.initConfig(config);
            me.callParent(arguments);
        },
    
    
        initComponent: function(){
            var me = this;
    
    
            me.callParent();
    
    
            me.add([{
                xtype: 'panel',
                width: '30%',
                height: 400,
                title: me.getBugTitle()
            },{
                xtype: 'panel',
                width: '50%',
                height: 400,
                title: me.getHappyTitle()
            }]);
    
    
        }
    
    
    });
    
    
    Ext.widget('app-main', {
        renderTo: document.body,
        height: 500,
        width: 500,
        bugTitle: 'Bug Title'
    });
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

  3. #3
    Sencha Premium Member
    Join Date
    Jan 2011
    Location
    London, UK
    Posts
    50
    Vote Rating
    2
    welshcathy is on a distinguished road

      0  

    Default


    Hiya slemmon - thanks for taking the time to look at this for me.

    But what you propose doesn't work.

    I did have different options commented in / out in the test code - that might have been confusing.

    Calling initConfig before and after the constructor is what causes this bug.
    Calling initConfig after the constructor is too late - since the constructor calls initComponent - and at this point I'd want all the config values to have been applied.

    With the test code I provided in the zip - for it to be considered working - you should see the title
    Bug Title -> applyBugTitle

    But all you see is
    Bug Title

    Which shows that the additional logic in applyBugTitle has been thrown away

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,079
    Vote Rating
    186
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

Thread Participants: 1

Tags for this Thread