---

• Next »
• « Previous

MessageBox:

You can display many types of messageboxes in Ext JS. Ext.window.MessageBox is the main class for creating messagebox in Ext JS.

Ext.MessageBox or Ext.Msg is a singleton instance of Ext.window.MessageBox. You don't have to create an object of Ext.window.MessageBox to show messagebox all the time.

Unlike a regular JavaScript alert (which halts the browser execution), showing a message box using Ext.Msg will not cause the code to stop. If you have code that should run after user's action from the message box, you must specify a callback function.

You can display four types of message boxes:

Alert: Displays a standard read-only message box with an OK button.

Confirm: Displays a confirmation message box with Yes and No buttons.

Prompt: Displays a message box with OK and Cancel buttons prompting the user to enter some text (similar to JavaScript's prompt). It can be a single-line or multi-line textbox.

Custom: Customized message box style.

Let's see an example of each type:

Singleton Alert:

You can display alert using 'Ext.Msg', which is a short form of singleton class ‘Ext.MessageBox'.

 	
Ext.Msg.alert('Status', 'This is Ext JS message box.');

Try it on https://fiddle.sencha.com/#fiddle/1k5s

Note: If you have two consecutive alert messages using ‘Ext.Msg', then the latest alert message will be displayed because Ext.Msg is a singleton class.

Ext.Msg.alert('Status', 'This is first Ext JS message box.');

Ext.Msg.alert('Status', 'This is second Ext JS message box.');

Try it on https://fiddle.sencha.com/#fiddle/1k5u

In the above example, you will see only one message box with the message 'This is second Ext JS message box.'

You may also create an object of Ext.window.MessageBox and call alert method like below:

var msg = Ext.create('Ext.window.MessageBox');
	
msg.alert('Status', 'This is Ext JS message box.');

Try it on https://fiddle.sencha.com/#fiddle/1k5v

Confirm:

Confirm message box displays message with Yes and No buttons. You can also capture users click event for further process.

Ext.Msg.confirm("Confirmation", "Do you want to Save changes?", function(btnText){
                if(btnText === "no"){
                    Ext.Msg.alert("Alert", "You have confirmed 'No'.");
                }
                else if(btnText === "yes"){
                    Ext.Msg.alert("Alert", "You have confirmed 'Yes'.");
                }
            }, this);

Try it on https://fiddle.sencha.com/#fiddle/1k60

Prompt:

Prompt displays a message box with OK and Cancel buttons prompting the user to enter some text.

Ext.Msg.prompt("Ext JS Tutorials", "Please enter your Sencha Id:", function(btnText, sInput){
                if(btnText === 'ok'){
                    Ext.Msg.alert("Status", "You entered:" + sInput);
                }
            }, this);

Try it on https://fiddle.sencha.com/#fiddle/1k61

Custom Message Box:

You can customize a message box based on your requirement by passing different configuration options.

Ext.Msg.show({
                title : 'Save',
                msg : 'Do you want to Save the changes? ',
                width : 300,
                closable : false,
                buttons : Ext.Msg.YESNOCANCEL,
                buttonText : 
                {
                    yes : 'Yes & Continue',
                    no : 'No & Continue',
                    cancel : 'Discard'
                },
                multiline : false,
                fn : function(buttonValue, inputText, showConfig){
                    Ext.Msg.alert('Status', buttonValue);
                },
                icon : Ext.Msg.QUESTION
            });

Try it on https://fiddle.sencha.com/#fiddle/3kt

---

---

• Next »
• « Previous