Easy Ext - Start here -> Highlight and Colour elements.

Highlighting & Colouring 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 highlight or colour various elements.

This might be useful to illuminate a part of your page after an error - or to highlight something like a div to draw your users eye to it..

Worth a mention...

One thing to note on the fadeOut method is that as the FX functions have their own queue of events, the assumption is that you would colour the element when hidden - unfortunately the queue is only good for the FX and not normal element work, so we have used a config option to set an afterStyle option which applies a css style to the element after the FX, this of course cures the queue issue!

We used...

Ext.FX : Provides useful effects to build upon.
highlight -> Highlights an element with a given colour
fadeOut -> Fades an element out (optionally can remove too)
fadeIn -> Fades an element in (makes it visible)
frame -> Projects a neat frame effect over an element when activated
Ext.Element : Provides methods/functions to retrive DOM/Page elements.
get -> Pull an element from the DOM/page and work with it

Try it out!

Highlight some text Yellow | Highlight some text Pink | Change the colour of Div 2

I am a div with an ID of 1, the paragraph under me will highlight yellow...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ornare fringilla ante. Sed auctor. Donec gravida interdum tellus. Aliquam vehicula mauris dapibus arcu. Phasellus nibh velit, hendrerit a, adipiscing vitae, eleifend quis, libero. Fusce eleifend iaculis erat. Suspendisse rhoncus nisi in arcu. Ut non augue. Ut consequat vehicula elit. Mauris quam. Vivamus iaculis, magna varius ornare porta, nulla diam venenatis libero, vel mattis dui pede vel dui. Praesent dapibus mauris non neque. Suspendisse eget orci. Suspendisse at nisl. Nam mauris dolor, mollis ut, mollis at, semper quis, augue. Morbi ornare. In eu mi non libero porttitor pharetra. Nullam sagittis vulputate orci. In eget sem quis nibh dignissim dignissim. Mauris in pede

I am a Div 2 and I will change colour before your eyes!

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
//by Owen Lees

//this file shows some basic ext stuff that is aimed at page level usage
//rather than at application level design, these examples could plug n play.

//colour up the div #2
Ext.get('colchange2').on('click',function(e,t){
	//fade the element out, then change colour, then fade in again
	el = Ext.get('div2');
	el.fadeOut({
		duration: 1,
		afterStyle: 'background-color:red'
	});

el.fadeIn({
		duration: 1
	});
	Ext.get(t.id).frame('cccccc',1);
});

Ext.get('highyellow').on('click',function(e,t){
	//use the highlight function
	//default colour is yellow
	Ext.get('yellowme').highlight();
});

Ext.get('highpink').on('click',function(e,t){
	//use the highlight function
	//this time in pink
	Ext.get('pinkme').highlight('ffccff');
});
	
});

Easy Ext :)

Highlighting & Colouring elements.

Worth a mention...

We used...

Try it out!

The Javascript Code

The PHP Code