Results 1 to 5 of 5

Thread: jQuery Fx.frame (among others) problem

  1. #1
    Ext User
    Join Date
    May 2007
    Location
    Minnesota
    Posts
    66
    Vote Rating
    0
      0  

    Exclamation jQuery Fx.frame (among others) problem

    The problem is that the jQuery adapter doesn't handle "from" arguments in its animation method. It is most easily brought to light when using the Fx.frame method, because the animation element's left and top attributes default to auto and then jQuery chokes when trying to parseInt them.

    Here's my partial, unoptimized fix for Ext v1.1b1 (in jquery-bridge.js, inside Ext.lib.Anim):
    Code:
            run : function(el, args, duration, easing, cb, scope, type){
                var anim = createAnim(cb, scope);
                var o = {};
                for(var k in args){
                    switch(k){   // jquery doesn't support, so convert
                        case 'points':
                            var by, pts, e = Ext.fly(el, '_animrun');
                            e.position();
                            if(by = args.points.by){
                                var xy = e.getXY();
                                pts = e.translatePoints([xy[0]+by[0], xy[1]+by[1]]);
                            }else{
                                pts = e.translatePoints(args.points.to);
                            }
                            o.left = pts.left;
                            o.top = pts.top;
                            if(!parseInt(e.getStyle('left'), 10)){ // auto bug
                                e.setLeft(0);
                            }
                            if(!parseInt(e.getStyle('top'), 10)){
                                e.setTop(0);
                            }
                        break;
                        case 'width':
                            o.width = args.width.to;
    +                       Ext.fly(el, '_animrun').setWidth(args.width.from);
                        break;
                        case 'height':
                            o.height = args.height.to;
    +                       Ext.fly(el, '_animrun').setHeight(args.height.from);
                        break;
                        case 'opacity':
                            o.opacity = args.opacity.to;
                        break;
    +                   case 'left':
    +                   	o.left = args.left.to;
    +                       Ext.fly(el, '_animrun').setLeft(args.left.from);
    +                   break;
    +                   case 'top':
    +                   	o.top = args.top.to;
    +                       Ext.fly(el, '_animrun').setTop(args.top.from);
    +                   break;
                        default:
                            o[k] = args[k].to;
                        break;
                    }
                }
                // TODO: find out about easing plug in?
                jQuery(el).animate(o, duration*1000, undefined, anim.proxyCallback);
                return anim;
            }

  2. #2
    Ext User
    Join Date
    May 2007
    Location
    France
    Posts
    32
    Vote Rating
    0
      0  

    Default

    Thanks I will check it tomorow.

  3. #3
    Ext User
    Join Date
    May 2007
    Location
    Minnesota
    Posts
    66
    Vote Rating
    0
      0  

    Default

    Jack, has this made it into SVN yet? It'd be nice to have in 1.1 final...

  4. #4
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956
    Vote Rating
    20
      0  

    Default

    Thanks iGx89, I will do some testing with this!
    Jack Slocum
    Sencha Co-Founder, Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum

  5. #5
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956
    Vote Rating
    20
      0  

    Default

    Ok, I made some changes and it appears to work great. It was indeed the lack of "from".

    Code:
    run : function(el, args, duration, easing, cb, scope, type){
                var anim = createAnim(cb, scope), e = Ext.fly(el, '_animrun');
                var o = {};
                for(var k in args){
                    if(args[k].from){
                        if(k != 'points'){
                            e.setStyle(k, args[k].from);
                        }
                    }
                    switch(k){   // jquery doesn't support, so convert
                        case 'points':
                            var by, pts;
                            e.position();
                            if(by = args.points.by){
                                var xy = e.getXY();
                                pts = e.translatePoints([xy[0]+by[0], xy[1]+by[1]]);
                            }else{
                                pts = e.translatePoints(args.points.to);
                            }
                            o.left = pts.left;
                            o.top = pts.top;
                            if(!parseInt(e.getStyle('left'), 10)){ // auto bug
                                e.setLeft(0);
                            }
                            if(!parseInt(e.getStyle('top'), 10)){
                                e.setTop(0);
                            }
                            if(args.points.from){
                                e.setXY(args.points.from);
                            }
                        break;
                        case 'width':
                            o.width = args.width.to;
                        break;
                        case 'height':
                            o.height = args.height.to;
                        break;
                        case 'opacity':
                            o.opacity = args.opacity.to;
                        break;
                        case 'left':
                       	    o.left = args.left.to;
                        break;
                        case 'top':
                       	    o.top = args.top.to;
                        break;
                        default:
                            o[k] = args[k].to;
                        break;
                    }
                }
                // TODO: find out about easing plug in?
                jQuery(el).animate(o, duration*1000, undefined, anim.proxyCallback);
                return anim;
            }
    Jack Slocum
    Sencha Co-Founder, Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum

Posting Permissions

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