Animation Direction - Ext JS

最新推荐文章于 2025-09-12 23:59:09 发布

最新推荐文章于 2025-09-12 23:59:09 发布 · 69 阅读

文章标签：

#EXT #Web #.net #UP

extJs 专栏收录该内容

281 篇文章

订阅专栏

本文讨论了如何在网页应用中调整元素动画的方向，特别是针对元素在页面右侧展开时导致页面滚动条出现的问题。通过同时动画化宽度和位置属性，实现了从右上角向左下角平滑展开的效果。

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

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.

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

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

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