Animation Direction - Ext JS

I am using this function

cBox.setSize(imgSize.width,imgSize.height,true);

is there a way to tell the animation which direction to do.

What my problem is is that the box that expands that sits on the right side of the page will expand the window and cause to you have to scroll right to see it.

i basicly want to anchor it to the top right and have it expand out to the top left.


just select an item from the gird and add it to box 2 or 4 and then click on the box and you will see what i mean.

Thanks.

**edit** removed link.

__________________
Jon
Web Application Developer - Indianapolis Motor Speedway
bombdiggity.net

#2   03-06-2007, 10:19 AM

Width has no "direction". Really what you want is two concurrent animations. Animate the left style attribute downwards, and the width upwards.

#3   03-06-2007, 11:36 AM

Quote: Originally Posted by Animal Width has no "direction". Really what you want is two concurrent animations. Animate the left style attribute downwards, and the width upwards. Ok that make some sense to me. can you give me an example? Thank Animal! **Edit** I got it working now animal. Thanks again!!! __________________ Jon Web Application Developer - Indianapolis Motor Speedway bombdiggity.net

#4   03-06-2007, 01:15 PM

Hey Jon, Just wanted to point out that using Element.slideOut/In, you can pass an anchor as a parameter to control exactly what you're trying to do. Check out the Fx class for details. Brian __________________ Brian Moeskau FAQ / Tutorials / User Extensions / Enhanced Forum Search

#5   03-06-2007, 02:06 PM

Thanks guys. With some help from Jack I got this figured out. Here is what i came up with when the box is clicked. var imgSize = Ext.fly(img[0]).getSize(); var xy = cBox.getXY(); if(cBox.hasClass('expanded')) { // we are expaned, do collapse if(cBox.hasClass('rightBox')) { cBox.setBounds(xy[0]+(imgSize.width-340),xy[1],342,152,{callback: function() { this.setStyle('position',''); this.removeClass('expanded'); }} ); } else { cBox.setBounds(xy[0],xy[1],342,152,{callback: function() { this.setStyle('position',''); this.removeClass('expanded'); }}); } } else { cBox.setStyle('position','absolute'); if(cBox.hasClass('rightBox')) { cBox.setBounds(xy[0]-(imgSize.width-340),xy[1],imgSize.width,imgSize.height,true); } else { cBox.setBounds(xy[0],xy[1],imgSize.width,imgSize.height,true); } cBox.addClass('expanded'); } __________________ Jon Web Application Developer - Indianapolis Motor Speedway bombdiggity.net