Let’s see today what Sencha touch has to offer us in term of showing message, notifications to users. When you are developing any mobile application and need to show some message to user as a pop-up window, or want to take an input from user, or want to display validation messages when user failed to validate form, Ext.MessageBox class is very handy and can be used for this purpose.
Today’s post is to take a look on Sencha touch’s Ext.MessageBox class and its useful functions.
Dialogs:
Ext.MessageBox.show() is used to show the dialog on mobile screen. All display functions (e.g. prompt, alert, confirm) on MessageBox call this function internally, although those calls are basic shortcuts and do not support all of the config options.
To display the basic dialog you need to pass the config object as a parameter to show() method with multiple options. Based on your passed parameter, show method display pop-up dialog accordingly. Most common parameter is button and iconCls property. Button property is used to show the buttons on dialog box and iconCls is used to display icon on the dialog. Code snippet below shows the show method with different parameter values.
|
1
2
3
4
5
6
7
8
|
Ext.Msg.show({
title: ‘Status’,
message: ‘Your changes saved.’,
width : 400,
buttons: Ext.MessageBox.OK,
iconCls: Ext.MessageBox.INFO,
fn : Ext.emptyFn
});
|
Output:
Dialog with multiple buttons
Following code snippet will display multiple buttons on dialog box when you pass buttons: Ext.MessageBox.YESNO to the config object. Take a closer look at iconCls property, its set to ERROR.
|
1
2
3
4
5
6
7
8
|
Ext.Msg.show({
title : ‘Error’,
message: ‘Are you sure you want to delete this record?.’,
width : 400,
buttons: Ext.MessageBox.YESNO,
iconCls: Ext.MessageBox.ERROR,
fn : Ext.emptyFn
});
|
Output:
Alert
Ext.MessageBox.alert() is similar to javascript alert() function which display a standard read-only message box with an OK button. If a callback function is passed it will be called after the user clicks the button.
|
1
2
3
4
5
6
|
Ext.Msg.alert(‘Success’,
‘Your email is successfully register with us.’,
function() {
alert(‘Hello….’);
}
);
|
Output:
Prompt
It displays a message box with OK and Cancel buttons prompting the user to enter some text, similar to JavaScript’s prompt. The prompt can be a single-line or multi-line textbox. If a callback function is passed it will be called after the user clicks either button, and the id of the button that was clicked and the text that was entered will be passed as the two parameters to the callback.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
Ext.Msg.prompt(
‘Welcome!’,
‘Please enter your email before you contiune.’,
function (buttonId, value) {
console.log(buttonId + ‘ clicked.\nEmail : ‘+ value);
},
null,
false,
null,
{
placeHolder: ’email please…’
}
);
|
Output:
That’s all Folks. Happy coding 🙂
Source techzoo.org
