The messages are very important for the user interaction with our applications, Ext JS has an especial component to replace the typical "alert" or "confirm" messages with a more appealing ones.

Resources

Before we start you need to download the resources for this chapter, which include a HTML document with buttons and some styles, an empty JS file where we are going to work and an image that we will use for this example, also you can see the demo of what we are going to do in this tutorial.

Packaging the tutorial

Let's define a "package" in where we're working on, we have seen the advantages of doing this in previous tutorials.

Ext.ns('com.quizzpot.tutorial');

com.quizzpot.tutorial.Msg = {
	init: function(){
	//The code of this tutorial goes here
	}
}

//executing the "init" function when the DOM is ready to be used
Ext.onReady(com.quizzpot.tutorial.Msg.init,com.quizzpot.tutorial.Msg);

Alerts

Through the component "Ext.MessageBox", Ext JS provides the necessary methods to generate different type of messages, one of those messages are the "alerts", which are generated like this:

Ext.MessageBox.alert('Title','The message we want to display');
//or we can use the shortcut
Ext.Msg.alert('Title','The message we want to display');

Let's add the event click to the button "alert" which is in the HTML, inside of this event we will display an alert message.

Ext.get('alert').on('click',function(){
	Ext.Msg.alert('Alert','This is an alert!');
},this);

In this way, when we are pressing the button "Alert", the message we have defined in the previous code will be displayed.

Confirmation

To show a confirmation message we use the method "confirm", in the next example we're going to add the event "click" to the button "confirmation" like this:

Ext.get('confirm').on('click',function(){
	Ext.Msg.confirm('Confirmation','Are you sure you want to do this?');
},this);

Later on we will see how to detect the button that was pressed but for now we will only show the dialog.

Prompt

This component allow us to request information to the user through a dialog that has an input text. In the following code we will add the event "click" to the corresponding button and when the event is triggered, a message is shown requesting the name of the user.

Ext.get('prompt').on('click',function(){
	Ext.Msg.prompt('Prompt','What is your name?');
},this);

Later on we will see how to get the information that the user has entered in the input text.

Wait

With this method we can send a waiting message to the user, this message has a progress bar which progresses slowly indicating that something is happening.

Ext.get('wait').on('click',function(){
	Ext.Msg.wait('Loading... please wait!');	
},this);

If we don't change the previous code, the message will stay there forever because it doesn't have an option to close it, this happens because we have to close it manually with an instruction, normally we will close it when the process we were running is finished, but for now I will send a "timeout" to close the message after 6 seconds.

Ext.get('wait').on('click',function(){
	Ext.Msg.wait('Loading... please wait!');
	window.setTimeout(function(){
		Ext.Msg.hide();
	},6000);
},this);

It's important to remember that the method "hide" closes the message that is being displayed at that moment.

Callbacks

The previous methods (except the wait method) receive a function as a third parameter, this function will be executed when the user clicks in any button or closes the message, this function receives in the first parameter the button when the user has clicked and in the case of the method "prompt" receives a second parameter which is the text that the user typed in the text box. The next example shows how we can execute instructions according to what the user chose in the confirmation message.

Ext.get('confirm').on('click',function(){
	Ext.Msg.confirm('Confirmation','Are you sure?',function(btn){
		if(btn === 'yes'){
			//if the user has accepted
			alert('You have accepted the terms!')
		}else{
			//if the user has canceled
			alert('The user has canceled!')!
		}	
	});
},this);

Also we can pass a function to be executed, for example:

Ext.ns('com.quizzpot.tutorial');

com.quizzpot.tutorial.Msg = {
	init: function(){
		// code removed for better understanding…
		Ext.get('confirm').on('click',function(){
			Ext.Msg.confirm('Confirmation','Are you sure you want to do this?',this.callback);
		},this);
		
		// code removed for better understanding…

	},
	
	callback: function(txt){
		alert(txt);
	}
}

In the previous example we created a function inside of the object "Msg" which is invoked when the user clicks in a button of the confirmation message.

Customized Messages

If we need to display a customized message, for example changing the icon of the message or use different buttons, then we can do it using the method "show" which receives a configuration object.

Ext.get('custom').on('click',function(){
	Ext.Msg.show({
		title: 'Customized', //<- the dialog's title
		msg: 'This is a customized message!', //<- the message
		buttons: Ext.Msg.YESNO, //<- YES and NO buttons
		icon: Ext.Msg.ERROR, // <- error icon
		fn: this.callback //<- the function that is executed when the user clicks on any button
	});
},this);

This is a message that has an error icon, there are other icons we can use in our applications:

Ext.Msg.ERROR //Error icon
Ext.Msg.INFO //Information icon
Ext.Msg.WARNING //Warning icon
Ext.Msg.QUESTION //Question icon

If we need to show a different icon we must create a CSS class and place the image as the background like this:

.profile{
	background:transparent url(profile.png) no-repeat;
}

After doing that, we need to specify the name of the class to the property 'icon'.

Ext.Msg.show({
	title: 'Customized',
	msg: 'This is a customized message!',
	buttons: Ext.Msg.YESNO,
	icon: 'profile', // <- customized icon
	fn: this.callback
});

Conclusions

Ext JS has different methods to communicate with the user and we can use them instead of the typical "alert" or "confirm" messages that the browser has by default, in this way our messages will be more appealing.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Learning Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!