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,958
    Vote Rating
    212
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      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

  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,958
    Vote Rating
    212
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


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

Thread Participants: 1

Tags for this Thread