ExtJS–Message Box

Ext.Msg is a singleton based on Ext.MessageBox class generating different types of message boxes.

There are four types of Message boxes

1. alert
      - Display a read-only message box with OK button (similar to javascript alert).
   

   	
   Ext.Msg.alert('Alert Box',
   					'This is a alert box. 
    Html element
   ');
   
   // To capture feedback
   Ext.Msg.alert('Alert Box', 'This box will capture feedback.',
   					function(buttonId) {
   						Ext.Msg.alert('Feeback', "Button Clicked : " + buttonId);
   					});	
   

   The live example can found here
   
2. confirm
   Ext.Msg.confirm() displays a confirmation message box. It displays  a message with Yes and No button. The code snippet is given below.
   

   	
   		Ext.Msg.confirm('Confirm Box', 'Do you wish to continue?', function(
   				buttonText) {
   			if (buttonText == "no") {
   				Ext.Msg.alert('No', "You clicked no");
   			}
   			if (buttonText == "yes") {
   				Ext.Msg.alert('Yes', "You clicked yes");
   			}
   		});
   

   The live example can be found here
   
3. prompt
      Prompt box can be used to get user input similar to javascript’s prompt. It has “ok” and “cancel”. The code snippet is given below
   

   Ext.Msg.prompt('Prompt', "Enter your name? ", function(btnTxt,
   					inputText) {
   				if (btnTxt == 'ok') {
   					Ext.Msg.alert("Prompt ", "Your name is "+inputText)
   				}
   			});
   

   The live example can be found here
   
4. Displaying a Custom Message Box
   Ext.Msg.show() should be used display a custom message box. We can configure the title, msg, dimension, buttons, call back function, icon.
   List of button types
   
   
   
   
   • Ext.MessageBox.OK
     
   • Ext.MessageBox.YES
     
   • Ext.MessageBox.NO
     
   • Ext.MessageBox.CANCEL

Icon can be

• Ext.MessageBox.INFO
  
• Ext.MessageBox.WARNING
  
• Ext.MessageBox.QUESTION
  
• Ext.MessageBox.ERROR

Ext.Msg.show({
				title : 'Show Message Box',
				msg : 'Please enter your address',
				width : 300,
				buttons : Ext.Msg.OKCANCEL,
				multiline : true,
				icon : Ext.window.MessageBox.INFO
			});

The live example can be found here