1. #1
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    447
    Answers
    4
    Vote Rating
    4
    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,850
    Answers
    155
    Vote Rating
    66
    Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about

      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

  3. #3
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    447
    Answers
    4
    Vote Rating
    4
    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
    573
    Answers
    58
    Vote Rating
    72
    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
    447
    Answers
    4
    Vote Rating
    4
    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