How to show Alert Dialog Box in Sencha Touch 2

Displaying alert dialog box in Sencha Touch 2 is very easy. Today we are going to see how to display alert dialog box with 1 button('ok' button), 2 buttons ('Yes' and 'No'), 3 buttons ('Yes','No','Cancel').

Ext.Msg.show() function is used to displays the alert dialog with a specified configuration. All display functions (e.g. prompt, alert, confirm) on Ext.Msg Object call this function internally, although those calls are basic shortcuts and do not support all of the config options allowed here.

Alert Dialog Box with 1 Button

The following code will display alert dialog with one button ('ok' button) using button config property Ext.MessageBox.OK. This function also allows to set icons using iconCls config property. Below are the list of predefined values available for iconCls config.

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

Ext.Msg.show({
           title: 'Status',
           message: 'Changes Saved Successfully',
           width: 500,
           buttons: Ext.MessageBox.OK,
           iconCls: Ext.MessageBox.INFO,
           fn: function(buttonId) {
             alert('You pressed the "' + buttonId + '" button.');
            }
});

Alert Dialog Box with 2 Button

The following code will display alert dialog with two button ('yes', 'no' button) using button config property Ext.MessageBox.YESNO.

Ext.Msg.show({
           title: 'Delete?',
           message: 'Are you sure, you want to delete this record?',
           width: 500,
           buttons: Ext.MessageBox.YESNO,
           iconCls: Ext.MessageBox.INFO,
           fn: function(buttonId) {
             alert('You pressed the "' + buttonId + '" button.');
            }
});

Alert Dialog Box with 3 Button

The following code will display alert dialog with two button ('yes', 'no', 'cancel' button) using button config property Ext.MessageBox.YESNOCANCEL.

Ext.Msg.show({
           title: 'Save Changes?',
           message: 'You are closing a tab that has unsaved changes.<br/> Would you like to save your changes?',
           width: 650,
           buttons: Ext.MessageBox.YESNOCANCEL,
           iconCls: Ext.MessageBox.INFO,
           fn: function(buttonId) {
             alert('You pressed the "' + buttonId + '" button.');
           }
});

Below are the list of predefined values available for buttons config.

• CANCEL
• ERROR
• INFO
• NO
• OK
• OKCANCEL
• QUESTION
• WARNING
• YES
• YESNO
• YESNOCANCEL

Hope, you enjoyed this Post.