Easy Ext - Start here -> Scale elements

Scale Elements

Ext has some great effects (FX) which can be found in the Ext.FX class in the API, this page demonstrates how you can scale elements using different event handlers.

Worth noting...

I added a multiple event handler in this script, this demonstrates how to have multiple events assigned to an element, on this occasion I am detecting mouseover/mouseout events to make a nice scaling div.

getWidth() has a boolean (true/false) attribute which when used gives the actual values of the element without any padding etc - very useful for accuracy in our input boxes.

Also introduced is basic value handling from input, with rudimentary error checking, we also demonstrated basic resetting of elements to values from page load. A gotcha also is to spot the el.dom.value update on the input tag rather than a straight el.value update.

Pausing between effects is introduced too as are some css changes using Ext.Element.

We used...

Ext.FX : Provides useful effects to build upon.
scale -> Scales an element in either direction with animation
pause -> Pauses the animation queue of this element for (x) seconds
highlight -> Flashes the chosen part of an element
Ext.Element : Provides methods/functions to retrive DOM/Page elements.
getWidth -> Provides the width of the element
getHeight -> Provides the height of the element
getValue -> Obtains the value attribute of the element (in this case the input)
setStyle -> Sets CSS attributes against the element

Try it out!

Grow Div 1 Sideways | Grow Div 1 Downward | Grow Div 1 X & Y together!

I am a div with an ID of 1 and I will scale for your viewing pleasure.

Enter a size to grow Div 2: px (x) px (y)
(Maximum sizes : x = 650 y = 650)

I am Div #2.

Please resize me
at your leisure!

The Javascript Code

// reference local blank image
//make sure YOUR path is correct!!
Ext.BLANK_IMAGE_URL = '../../ext-2.0.2/resources/images/default/s.gif';

//this runs on DOM load - you can access all the good stuff now.

Ext.onReady(function() {
	 
//easy Ext examples V1
//by Owen Lees

//this file shows some basic ext stuff that is aimed at page level usage
//this script produces some scaling elements

//lets grab the size of the elements (div1 and div2) now so we can refer back
var div1el = Ext.get('div1');
var div1w = div1el.getWidth();
var div1h = div1el.getHeight();

var div2el = Ext.get('div2');
var div2w = div2el.getWidth();
var div2h = div2el.getHeight();
var div2wtrue = div2el.getWidth(true); //excluding padding etc
var div2htrue = div2el.getHeight(true); //excluding padding etc

//now lets make some default scale sizes
var maxw = 650;
var maxh = 650;

//attach multiple handlers to a div here..
Ext.get('wider1').on({
		'mouseover' : {
			fn: function(e, t){
				//make the element bigger with an FX
				div1el.scale(maxw,undefined, {
					duration: .5,
					easing: 'easeOut'
				});
			}
		},
		'mouseout' : {
			fn: function(e,t){
				div1el.scale(div1w,undefined, {
					duration: .5,
					easing: 'easeIn'
				})
			}
		}
});

Ext.get('taller1').on({
		'mouseover' : {
			fn: function(e, t){
				//make the element bigger with an FX
				div1el.scale(undefined,maxh, {
					duration: .5,
					easing: 'easeOut'
				});
			}
		},
		'mouseout' : {
			fn: function(e,t){
				div1el.scale(undefined,div1h, {
					duration: .5,
					easing: 'easeIn'
				})
			}
		}
});

Ext.get('xy1').on({
		'mouseover' : {
			fn: function(e, t){
				//make the element bigger with an FX
				div1el.scale(maxw,maxh, {
					duration: .5,
					easing: 'easeOut'
				});
			}
		},
		'mouseout' : {
			fn: function(e,t){
				div1el.scale(div1w,div1h, {
					duration: .5,
					easing: 'easeIn'
				})
			}
		}
});

//now the functionality for our simple user driven scaled div
Ext.get('button').on('click',function(){
	var xval = Ext.get('xget').getValue();
	var yval = Ext.get('yget').getValue();
	
	//test for ridiculous figures outside allowed range
	//either too big or too small or is not a number
	if(xval > maxw || yval > maxh || xval < 0 || yval < 0 || isNaN(xval) || isNaN(yval)){
		//show an error blink and turn the text red!
		var errormsg = Ext.get('errormsg');
		errormsg.setStyle({
			color: '#CC0000'
		});
		errormsg.highlight('cc0000');
	}else{
	//these are nice figures so lets scale the box	
		//lets make this a nice animation by scaling 1 side then the other
		//first the width
		div2el.scale(xval,undefined,{
			duration: 1,
			easing: 'easeOut'
		});
		//pause the animation for a second
		div2el.pause(1);
		//now the height
		div2el.scale(xval,yval,{
			duration: 1,
			easing: 'easeIn'
		})
	}
	
});

Ext.get('reset').on('click',function(e,t){
	
	Ext.get('xget').dom.value = div2wtrue;
	Ext.get('yget').dom.value = div2htrue;
	
	//reset the div back to original size
	div2el.scale(div2w,div2h,{
		duration: 1,
		easing: 'easeOut'
	});
	
})

});

Easy Ext :)

Scale Elements

Worth noting...

We used...

Try it out!

The Javascript Code