controlling slide animation

[ehboym]

Hi,

I'm trying to create a slide animation for a panel using :

Ext.Anim.run(this, 'slide', {
    direction: 'right',
    from: {left: 100},
    to: {left: 200},
    after: function() {this.setLeft(200);}
});

I do get the defined animation but the values 'from' and 'to' are ignored.
The animation always runs from the element's origin to the (Origin + element width).

What am I doing wrong here ?

Is there a way to make is stay at the 'to' position (it is jumping back to it's origin) ?

Thanks

Erez

[AndreaCammarata]

You forgot to append 'px', and, probably, to slide your panel you should run your animation to the panel element and the direction config is not needed.

new Ext.Anim.run(this.element, {
    from: {
        left: 100 + 'px'
    },
    to: {
        left: 200 + 'px'
    }
});

PS: Be sure your panel is floating or that it has an absolute positioning.

[ehboym]

Hi,

var LMapcontrol = Ext.getCmp('viewMapControls_L');
Ext.Anim.run(LMapcontrol, 'slide', {
	direction: 'right',
	from: {left: 100 + 'px'},
	to: {left: 200 + 'px'},
	after: function() {LMapcontrol.setLeft(0);}
});

The objet is animated from 0px to LMapcontrol.width ignoring the 'from' and 'to' values.
The panels top and left parameters are set so it should be floating.

and without the 'after function it jumps to it's starting position.

Erez

[ehboym]

Finally I have a working pice of code:

		Ext.Animator.run({
			element: LMapcontrol.element,
			easing: 'ease-in',
			preserveEndState: true,
			from: {left: -62},
			to: {left: 0}
		});

I'm not shore what made the difference but it is working now.

Erez