Home > DeveloperSection > Articles > Message Box in Sencha Touch

Message Box in Sencha Touch


Sencha Touch Sencha Touch 
Ratings:
0 Comment(s)
 7925  View(s)
Rate this:

Message Box in Sencha Touch

In this article, I’m explaining the message box in sencha touch and its types.

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});

    }

});

 

Output

Message Box in Sencha Touch

When you tap/clicks the alert button:

Message Box in Sencha Touch

 When you tap/clicks the prompt button:

Message Box in Sencha Touch

 When you tap/clicks the confirm button:

Message Box in Sencha Touch

 When you tap/clicks the confirm button:

 Message Box in Sencha Touch


Don't want to miss updates? Please click the below button!

Follow MindStick