Message box is used to display a message on the screen.

Types of Message Box in Sencha Touch:

•         Alert
•         Prompt
•         Confirm
•         Show  

Alert

It displays a read-only message with a OK button.

Syntax:-

Ext.Msg.alert( String title, String msg, [Function fn], [Object scope] );

Parameters:-

•          Title: Title of message box.
•          Msg: Message of the box.
•          Fn: the callback function invoked after the message box is closed.
•          Scope: The scope of the callback function.

Prompt

Displays a message with OK and CANCEL buttons and prompts the user to enter some text.

Syntax:-

Ext.Msg.prompt( String title, String msg, [Function fn], [Object scope], [Boolean/Number multiline] );

Parameters:-

•         Title: Title of message box.
•         Msg: Message of the box.
•         Fn: The callback function invoked after the message box is closed.
•         Scope: Scope of the callback function.
•         Multiline: True to make the message box multiline.

Confirm

Displays a confirmation message with YES and NO buttons.

Syntax:-

Ext.Msg.confirm( String title, String msg, [Function fn], [Object scope] );

Parameters:-

•        Title: Title of message box.
•        Msg: Message of the box.
•        Fn: The callback function invoked after the message box is closed.
•        Scope: Scope of the callback function.

Show

Displays a new message box or reinitializes a message box based on the configuration options passed in. All functions/methods like prompt, alert call the show function internally. The following configuration options are supported:

Property	Type	Description
animEl	String/Element	An id or Element from which the message box should animate as it opens and closes (defaults to undefined).
buttons	Object/Boolean	A button config object (e.g., Ext.MessageBox.OKCANCEL or {ok:'Foo', cancel:'Bar'}), or false to not show any buttons (defaults to false).
closable	Boolean	False to hide the top-right close button (defaults to true).  Note that progress and wait dialogs will ignore this property and always hide the close button as they can only be closed programmatically.
cls	String	A custom CSS class to apply to the message box element.
defaultTextHeight	Number	The default height in pixels of the message box's multiline textarea if displayed (defaults to 75).
fn	Function	A callback function to execute after closing the dialog.  The arguments to the function will be btn (the name of the button that was clicked, if applicable, e.g. "ok"), and text (the value of the active text field, if applicable). Progress and wait dialogs will ignore this option since they do not respond to user actions and can only be closed programmatically, so any required function should be called by the same code after it closes the dialog.
icon	String	A CSS class that provides a background image to be used as an icon for the dialog (e.g., Ext.MessageBox.WARNING or 'custom-class', defaults to '').
maxWidth	Number	The maximum width in pixels of the message box (defaults to 600).
minWidth	Number	The minimum width in pixels of the message box (defaults to 100).
modal	Boolean	False to allow user interaction with the page while the message box is displayed (defaults to true).
msg	String	A string that will replace the existing message box body text (defaults to the XHTML-compliant non-breaking space character ' ').
multiline	Boolean	True to prompt the user to enter multi-line text (defaults to false).
progress	Boolean	True to display a progress bar (defaults to false).
progressText	String	The text to display inside the progress bar if progress = true (defaults to '').
prompt	Boolean	True to prompt the user to enter single-line text (defaults to false).
proxyDrag	Boolean	True to display a lightweight proxy while dragging (defaults to false).
title	String	The title text.
value	String	The string value to set into the active textbox element if displayed.
wait	Boolean	True to display a progress bar (defaults to false).
width	Number	The width of the dialog in pixels.

 Syntax:- 

Ext.Msg.show({ title, msg, buttons, function fn });

Example

Ext.define('MyApp.view.Container', {

    extend: 'Ext.Container',

 

    config: {

        items: [

            {

                xtype: 'titlebar',

                docked: 'top',

                title: 'Types Of Message Box'

            },

            {

                xtype: 'panel',

                layout: {

                    type: 'hbox'

                },

                items: [

                    {

                        xtype: 'button',

                        flex: 1,

                        itemId: 'mybutton',

                        ui: 'action-round',

                        text: 'Alert'

                    },

                    {

                        xtype: 'button',

                        flex: 1,

                        itemId: 'mybutton1',

                        ui: 'decline-round',

                        text: 'Prompt'

                    },

                    {

                        xtype: 'button',

                        flex: 1,

                        itemId: 'mybutton2',

                        ui: 'confirm-round',

                        text: 'Confirm'

                    },

                    {

                        xtype: 'button',

                        flex: 1,

                        itemId: 'mybutton3',

                        ui: 'action-round',

                        text: 'Show'

                    }

                ]

            }

        ],

        listeners: [

            {

                fn: 'onAlertbuttonTap',

                event: 'tap',

                delegate: '#mybutton'

            },

            {

                fn: 'onPromptbutton1Tap',

                event: 'tap',

                delegate: '#mybutton1'

            },

            {

                fn: 'onConfirmbutton2Tap',

                event: 'tap',

                delegate: '#mybutton2'

            },

            {

                fn: 'onShowbutton3Tap',

                event: 'tap',

                delegate: '#mybutton3'

            }

        ]

    },

 

    onAlertbuttonTap: function(button, e, eOpts) {

        Ext.Msg.alert('Title','You pressed the Alert Button');

    },

 

    onPromptbutton1Tap: function(button, e, eOpts) {

        Ext.Msg.prompt('Name','Enter Your Name:',

        function(btn,text)

        {

            if(btn === 'ok')

            {

                Ext.Msg.alert(text);

            }

        });

    },

 

    onConfirmbutton2Tap: function(button, e, eOpts) {

        Ext.Msg.confirm('Confirmation','Are you sure you want to do that?');

    },

 

    onShowbutton3Tap: function(button, e, eOpts) {

        Ext.Msg.show({ 
            title: 'Save Changes?', 
            msg: 'You are closing a tab that have unsaved changes.Would you like to save your changes?', 
        buttons: Ext.MessageBox.YESNOCANCEL}); 
    } 
});