Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-9658 in a recent build.
  1. #1
    Sencha Premium Member
    Join Date
    Dec 2011
    Location
    London, UK
    Posts
    257
    Vote Rating
    8
    bseddon will become famous soon enough

      0  

    Default Animation regression in 4.2

    Animation regression in 4.2


    The attached application demonstrates a regression when animating the height of a container in IE 7. This code works with 4.1.3 but fails when using 4.2.

    The application fails because the height and line-height values are, at some point, negative. The style values then cause a problem when they are applied on line 13338 of ext-all-debug.js of 4.2.663.

    My temporary solution is to place a try/catch around this assignment. I recognize this is not a real solution. The negative value is drawn from an earlier 'dirtyProps' value. This collection is stored against the element which is being managed by the layout engine. See line 119964.

    I've not checked but I imagine the same problem would affect width animations as well.

    This application has been checked with 4.2.1 778 where the problem still exists.

    *EDIT BY SLEMMON
    inline test case
    Code:
    Ext.define('MyApp.view.MyViewport', {
        extend: 'Ext.container.Viewport',
    
    
        layout: {
            type: 'border'
        },
    
    
        initComponent: function() {
            var me = this;
    
    
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'container',
                        region: 'north',
                        height: 0,
                        id: 'problemcontainer',
                        style: 'background-color: lightgreen; color: black;',
                        layout: {
                            align: 'stretch',
                            type: 'hbox'
                        },
                        items: [
                            {
                                xtype: 'label',
                                flex: 1,
                                id: 'information',
                                padding: 4,
                                text: ''
                            },
                            {
                                xtype: 'button',
                                width: 20,
                                listeners: {
                                    click: {
                                        fn: me.onClearButtonClick,
                                        scope: me
                                    }
                                }
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        region: 'center',
                        layout: {
                            align: 'stretch',
                            type: 'vbox'
                        },
                        title: 'Animation problem test',
                        items: [
                            {
                                xtype: 'button',
                                margin: 8,
                                width: 100,
                                text: 'Show problem',
                                listeners: {
                                    click: {
                                        fn: me.onButtonClick,
                                        scope: me
                                    }
                                }
                            },
                            {
                                xtype: 'label',
                                padding: '2 8 2 8',
                                text: 'Try in IE 8, 9 or 10 first'
                            },
                            {
                                xtype: 'label',
                                padding: '2 8 2 8',
                                text: 'Then try using IE 7'
                            },
                            {
                                xtype: 'label',
                                flex: 1,
                                padding: '2 8 2 8 ',
                                text: 'Attach the debugger and press the button'
                            }
                        ]
                    }
                ]
            });
    
    
            me.callParent(arguments);
        },
    
    
        onClearButtonClick: function(button, e, eOpts) {
            this.clearMessage();
        },
    
    
        onButtonClick: function(button, e, eOpts) {
            this.setMessage("I'm a problem in IE 7");
        },
    
    
        clearMessage: function() {
            var status = this.down("#information");
            status.setText("");
            status.ownerCt.setHeight(0);
        },
    
    
        setMessage: function(message) {
            var status = this.down("#information");
            status.setText(message);
            status.ownerCt.setVisible(true);
            status.ownerCt.animate({
                dynamic: true,
                duration: 500,
                to: {
                    height: 23
                }
            });
        }
    
    
    });
    
    
    
    
    Ext.create('MyApp.view.MyViewport');
    Attached Files
    Last edited by bseddon; 30 Apr 2013 at 4:48 PM. Reason: added inline test case

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,035
    Vote Rating
    185
    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