Results 1 to 5 of 5

Thread: Setting "animCollapse" "false" as a class property is overrided after initialization

Hybrid View

Previous Post Previous Post   Next Post Next Post
    You found a bug! We've classified it as EXTJS-6790 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    35

    Default Setting "animCollapse" "false" as a class property is overrided after initialization

    REQUIRED INFORMATION




    Ext version tested:
    • Ext 4.1.0
    • Ext 4.1.1
    Browser versions tested against:
    • IE9
    • FF10.0.5 ESR (firebug 1.9.2 installed)
    • Google Chrome 20.0.1132.57 m

    Description:
    • Setting "animCollapse" "false" as a class property is overrided after initialization as true.
    Steps to reproduce the problem:
    • Create a class with "animCollapse : false"
    • Create two panel configs, one of them set to xtype equal to alias of your not animated panel class and "collapsible:true"
    • Create window with 'border' layout setting items array of two panel configs created on previous step and with button alerting property "animCollapse" of your not animated panel
    • Notice that inside InitComponent "this.animCollapse" is recognized as "false"
    • After page loaded click on button alerting property "animCollapse" of your not animated panel and observe that "this.animCollapse" is recognized as "true"
    The result that was expected:
    • "this.animCollapse" should preserve the same during lifetime of panel if not specified anything else
    The result that occurs instead:
    • "this.animCollapse" loses initial value
    Test Case:


    Code:
    Ext.onReady(function() {
        Ext.define('NotAnimatedPanel', {
            alias : 'widget.notanimated',
            extend : 'Ext.form.Panel',
            animCollapse : false,
            
            initComponent : function () {
                
                this.callParent();
                console.log('animCollapse = ' + this.animCollapse + '\n I am happy unanimated panel:)');
            }
        });
        var panel1 = {//layout: 'absolute',
            defaultType: 'textfield',
            border: false,
                      
             region            : 'center',
            items: [{
                fieldLabel: 'Send To',
                fieldWidth: 60,
                msgTarget: 'side',
                allowBlank: false,
                x: 5,
                y: 5,
                name: 'to',
                anchor: '-5'  // anchor width by percentage
            }, {
                fieldLabel: 'Subject',
                fieldWidth: 60,
                x: 5,
                y: 35,
                name: 'subject',
                anchor: '-5'  // anchor width by percentage
            }, {
                x:5,
                y: 65,
                xtype: 'textarea',
                style: 'margin:0',
                hideLabel: true,
                name: 'msg',
                anchor: '-5 -5'  // anchor width and height
            }]};
        var panel2 = {
            xtype: 'notanimated', 
            //layout: 'absolute',
             region            : 'west',        
            border: false,
            collapsible        : true,
            split              : true,
            collapsed: true,
    
    
            items: [{
                fieldLabel: 'Send To',
                fieldWidth: 60,
                msgTarget: 'side',
                allowBlank: false,
                x: 205,
                y: 5,
                name: 'to1',
                anchor: '-5'  // anchor width by percentage
            }, {
                fieldLabel: 'Subject',
                fieldWidth: 60,
                x: 205,
                y: 35,
                name: 'subject1',
                anchor: '-5'  // anchor width by percentage
            }, {
                x:205,
                y: 65,
                xtype: 'textarea',
                style: 'margin:0',
                hideLabel: true,
                name: 'msg1',
                anchor: '-5 -5'  // anchor width and height
            }]
        };
    
    
        var win = Ext.create('Ext.window.Window', {
            title: 'Resize Me',
            width: 300,
            height: 300,
            minWidth: 300,
            minHeight: 200,
                    /* layout    : {
                type  : 'vbox',
                align : 'stretch'
             },*/
            layout: 'border',
            plain:true,
            items: [panel1, panel2],
    
    
            buttons: [{
                text: 'Click me!!!',
                handler : function () {
                console.log('animCollapse = ' + na.animCollapse + '\n And now I am animated :( I feel upset :(');
                }
                    
            },{
                text: 'Cancel'
            }]
        });
        na = win.child('[xtype="notanimated"]');
    
    
        win.show();                           
    });?





    HELPFUL INFORMATION
    If animCollapse property is set as class default property it is not recognized by function "hasOwnProperty" as being "OwnProperty", so in this codepiece
    animCollapse is set to false but control goes to assigning it true (inside second "if" clause)
    Code:
                if (!item.hasOwnProperty('collapseMode')) {
                    item.collapseMode = me.panelCollapseMode;
                }
    
    
                if (!item.hasOwnProperty('animCollapse')) {
                    if (item.collapseMode != 'placeholder') {
                        
                        
                        item.animCollapse = false;
                    } else {
                        item.animCollapse = me.panelCollapseAnimate;
                    }
                }

    See this URL for live test case:
    http://jsfiddle.net/Patlatus/xwRnX/18/




    Debugging already done:
    • none
    Possible fix:
    • not provided
    Additional CSS used:
    • only default ext-all.css
    Operating System:
    • Win7
    Last edited by Patlatus; 9 Aug 2012 at 6:03 AM. Reason: changing \code to /code

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,450

    Default

    Thank you for the report.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha Premium Member
    Join Date
    Mar 2007
    Posts
    64

    Default

    Just pinging to see if this has been updated/resolved. Is this fixed for 4.2?

  4. #4
    Sencha User Misiu's Avatar
    Join Date
    Jun 2012
    Location
    Poland
    Posts
    264

    Default

    any updates? How to fix this? For now I'm using this in initComponent:
    Code:
    Ext.apply(me, { animCollapse: me.animCollapse });
    Are there any overrides available?

  5. #5
    Sencha Premium User
    Join Date
    Oct 2016
    Posts
    8

    Default

    Ran into this in version 6.5.0 classic. I looks like there is a bug in Ext.layout.container.Border's onAdd, where it will ignore the animCollapse property on the component and just set it to this.panelCollapseAnimate, which is undocumented and always true:

    Code:
                if (!item.hasOwnProperty('animCollapse')) {
                    if (item.collapseMode !== 'placeholder') {
                        // other collapse modes do not animate nicely in a border layout, so
                        // default them to off:
                        item.animCollapse = false;
                    } else {
                        item.animCollapse = me.panelCollapseAnimate;
                    }
                }

    Seems the else clause should be removed as well as the me.panelCollapseAnimate property. For now I am working around this by passing panelCollapseAnimate: false to the border layout config.

Tags for this Thread

Posting Permissions

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