Sencha Touch: Dialog, Prompt, Alert

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.

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.

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.

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.

Output:

That’s all Folks. Happy coding :)

About the Author

has written 68 posts.

I Love Coding, Analyzing, Designing and doing it the right way. I am obsessed about learn anything new daily and sharing what I have learn each Day. This Blog is journey of my Zeal, going through step by step to the mountain of desire to become prefect. Google Wanna Hire me ?

Copyright © 2017 TechZoo - Technology Blog. All rights reserved.
Proudly powered by WordPress. Developed by 7Tech Solutions