1. #1
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    443
    Answers
    4
    Vote Rating
    3
    Jangla is on a distinguished road

      0  

    Default Unanswered: Potential bug when animating width of container?

    Unanswered: Potential bug when animating width of container?


    See attached screenshot. This shows the result of animating the width of a container component. Note that in the console the widths that are calculated for the animation are being output but the observed width in the DOM is different (and has about 10 decimal places).

    Here's the code called to get this:

    Code:
    var cW = me.sizingParent.getPosition()[0] + me.sizingParent.getWidth(),
        bW = window.innerWidth;
    
    
        me.expanded = me.expanded || false
    
    
    console.log('cW : ' + cW)
    console.log('bW : ' + bW)
    console.log('bW - cW : ' + ((bW - cW) + 10))
    
    
    Ext.getCmp( 'sidebarpanel' ).animate( {
        duration    : 500,
        to          : {
            width : me.expanded ? 100 : (bW - cW) + 10,
            x     : me.expanded ? bW - 100 : cW
        }, callback : function(){
            me.expanded = !me.expanded;
        }
    } )
    Why is this a problem? Because when I'm animating this I have an expectation that the sidebar will stay connected to the right side of the browser window. Some times the calculation is so far off that there's a gap of up to 8 pixels!!!

    Is this a bug, is there something I can do with such a simple animation to make sure it gets the numbers right? Doesn't seem like it should be as hard as this to simply change width an position of a component.
    Attached Images

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    3,386
    Answers
    146
    Vote Rating
    62
    Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough

      0  

    Default


    It would be a bug if the framework is calculating that width, but it seems like your code is doing it. Perhaps it is using a different value than expected. Can you please post a runnable test case (perhaps in a fiddle) that recreates the issue so we can have a play?
    Get on the Fast Track with Sencha Training http://sencha.com/training

    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
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    443
    Answers
    4
    Vote Rating
    3
    Jangla is on a distinguished road

      0  

    Default


    As you can see in the screenshot, my calculated values are being output in the console and are consistently correct. The observed width value is wrong and differs each time.

    Nevertheless, I will try put together a test page for you.

  4. #4
    Sencha User
    Join Date
    Sep 2011
    Posts
    568
    Answers
    58
    Vote Rating
    69
    ettavolt is just really nice ettavolt is just really nice ettavolt is just really nice ettavolt is just really nice

      0  

    Default


    Looks like a rounding error at the end of animation. Try to set exact values in animation end callback.

  5. #5
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    443
    Answers
    4
    Vote Rating
    3
    Jangla is on a distinguished road

      0  

    Default


    Quote Originally Posted by ettavolt View Post
    Looks like a rounding error at the end of animation. Try to set exact values in animation end callback.
    You can see from my code that I'm calculating the values and spitting them out in the console. The screenshot shows the values in the console. They are integers. The rounding errors are definitely not a result of the values I'm calculating. If I then have to manually set a whole number at the end of the animation, you'll get a jerky end to the animation.

Thread Participants: 2