Easy Ext - Start here -> Message Boxes and Alerts

Message Boxes and Alerts

If you are still using crappy browser alert boxes - lets take a look at the amazingly seductive Ext.Msg class in the ExtJs library.

The Ext.Msg class does some nice things like Masking the screen whilst it is active, you can set up buttons to get a response and populate it with virtually anything from the page..

If you want some quick eye candy - check this one out!

Worth noting...

Buttons in the Ext.Msg class are set up using CONSTANTS, like YESNOCANCEL which provides (amaxingly) 3 buttons which you can test against [YES] [NO] [CANCEL]

We used...

Ext.Msg (or) Ext.MessageBox : Message boxes and alert boxes.
show -> Shows a Message Box on screen with various config options available.
Ext.Element : Provides methods/functions to retrive DOM/Page elements.
get -> We use this to get the innerHTML attribute of an element

Try it out!

Eeek! Show an Error! | Lets show how cool we are.. | Need to get an answer?

Ext.Msg is a COOL class.

It certainly is!

And look how easy it is to take elements like me from the page and show them inside the message box when you use Ext.get(el).dom.innerHTML !

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';

//Ext.example - incredibly cool info box from the Ext examples pages

Ext.example = function(){
	var msgCt;
	
function createBox(t, s) {
    return ["<div class=\"msg\">", "<div class=\"x-box-tl\"><div class=\"x-box-tr\"><div class=\"x-box-tc\"></div></div></div>", "<div class=\"x-box-ml\"><div class=\"x-box-mr\"><div class=\"x-box-mc\"><h3>", t, "</h3>", s, "</div></div></div>", "<div class=\"x-box-bl\"><div class=\"x-box-br\"><div class=\"x-box-bc\"></div></div></div>", "</div>"].join("");
}

return {

msg: function(title, format){
		if (!msgCt) {
			msgCt = Ext.DomHelper.insertFirst(document.body, {
				id: "msg-div"
			}, true);
		}
		msgCt.alignTo(document, "t-t");
		var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));
		var m = Ext.DomHelper.append(msgCt, {
			html: createBox(title, s)
		}, true);
		m.slideIn("t").pause(1).ghost("t", {
			remove: true
		});
	}
};
}();

//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 message boxes and alert examples

//this shows the result from a text box msg
function showResultText(btn, text){
	if(btn == 'ok' && text == '42'){
		Ext.example.msg('Correct!', 'You are saved from the Vogons!', btn, text);	
	}else{
		if(btn == 'cancel'){
			Ext.example.msg('Aborted!', 'You pressed the {0} button...', btn, text);
		}else{
			Ext.example.msg('Oh Dear...', '"{1}" is not the right answer! However - thanks for pressing the {0} button...', btn, text);
		}
	}
    
};

//simple little message box function
var msgBoxShow = function(text,title){

Ext.Msg.show({
   title: title,
   msg: text,
   width: 400,
   icon: Ext.MessageBox.WARNING
});	
	
}

var texty = 'This is a really basic Ext alert box.\n\nThese really look cool compared to the standard browser ones.<br>\n A great feature is the automatic page masking!';
var titly = 'Intergalactic EMERGENCY!';

Ext.get('showerror').on('click',function(){
	//if you want to send functions parameters you have to do it like this.
	msgBoxShow(texty, titly);
});

Ext.get('showtext').on('click',function(){
	//get some text off the page
	var titly = Ext.get('text1').dom.innerHTML;
	var texty = Ext.get('text2').dom.innerHTML
	msgBoxShow(texty, titly);
});

Ext.get('showbuttons').on('click',function(e,t){
	//just for fun drop a frame FX onto the link
	Ext.get(t.id).frame();
	//now make a message box with buttons that themselves
	//show another alert with our response.
	Ext.Msg.show({
		title: 'Whats the meaning of life?',
		msg: 'Hint.. Think Hitchhikers Guide to the Galaxy',
		icon: Ext.MessageBox.QUESTION,
		maxWidth: 300,
		buttons: Ext.MessageBox.OKCANCEL,
		multiline: true,
		fn: showResultText //this checks the response from us
	})
})

});

Easy Ext :)

Message Boxes and Alerts

Worth noting...

We used...

Try it out!

The Javascript Code