Geeks With Blogs
Łukasz Kuryło's blog
This is a part of EXT JS Tutorial

In this part of the Ext JS tutorial I would like to show the Ext.MessageBox class. In the first part, where I showed how to add Ext library into MVC project, I have put there a Ext.Msg.alert to test the installation. Actually the Ext.Msg it is an alias for Ext.MessageBox class. Both can be used interchangeably.

Ext.Msg.prompt

Ok, so let’s create a first dialog to see how it’s look like. Let it be a Ext.Msg.prompt.
This method displays a message box prompting to user for some text.

        Ext.onReady(function()

        {

            Ext.Msg.prompt("Enter your name", "Your name");

        });


And the result on the screen










As you can see, this one line of code creates a window with three buttons and a field for input text.
The prompt method takes six arguments, but only first two are required. The first it is a window title, second this is a message inside the body as you can see above.

Notice that, even you enter your name in this box and press Ok, nothing will happen. First you must specify the callback function (parameter third). Callback this is a function which is called when a specific event occur(in this case, click on one of the buttons). This callback function takes two arguments: first determine the button, which user clicked and second the result, what he’s written in the input field.

Forth is scope of callback function. For more info look here. Next parameter takes the true/false value and is responsible for multiline input. Default is singleline set. The last parameter determine the default value in the input field.

About onReady function I have written here
From this moment I won’t mention about this function again. I hope you will remember that every time when you want to refer to element in DOM hierarchy, this element must be visible. This ensures the onReady function.

Let’s see the parameters in action.

            Ext.Msg.prompt('Enter your name', 'Your name', function(btn, txt)

            {

                if (btn == "ok" && txt.length > 0)

                {

                    Ext.Msg.alert('Result', 'You have set the name to: ' + txt);

                }

            }, this, true, 'Lukasz Kurylo');


And the result












When you click the Ok button you will see the alert method from callback function.









And the result after page load and clicked the Ok button.

Ext.Msg.confirm

This method you can use when user have to choose between confirming or rejecting some action.
Method takes four arguments, which are identical in sequence and significance, as in the Ext.Msg.prompt.
Using the callback function it is possible to distinguish which button was pressed.

Simple example

            Ext.Msg.confirm("Confirmation", "Do you want to create a new account?", function(btn)

            {

                if (btn == 'yes')

                {

                    Ext.Msg.alert("Result", "New account created successfully");

                } else

                {

                    Ext.Msg.alert("Result", "Abort");

                }

            }, this);


Result








Depending on the selected button, the appropriate window will be displayed:







or









Ext.Msg.progress

This is a three-argument method which shows a progress bar that user cannot close. You must use Ext.Msg.updateProgress method to update the progress bar and close it when the process is complete.

Example

            var i = 0;

            Ext.Msg.progress("Progress example", "some message", "progress text");

           

            var x = window.setInterval(function()

            {

                i = i + 0.01;

               

                Ext.Msg.updateProgress(i);

               

                if (i >= 1)

                {

                    window.clearInterval(x);

                    Ext.Msg.hide();

                }

            }, 50);


Using the setInterval method you can update the variable which is passed to the updateProgress. When the end point will be achieved, you must remember to hide the progress bar manually.
Notice that, the expression in if clause must be set as greater or equal (not only equal), otherwise the dialog won’t be hide.
The second parameter passed to setInterval method determines in milliseconds how often the progress bar is updated.

Result







Config object/JSON

Imagine that, a method has a lot of parameters, but you want set up only a few of them. Of course you could pass them all, one by one in required order and these which you are not interested in leave blank, but what if a method has ten or twenty these parameters? And you have to create a few instances of it, every time passing the parameters? Ext provides a nice mechanism, which is a config object. This object is constructed by using JSON to describe all the of the arguments. JSON this is JavaScript Object Notation which is similar to CSS. Using JSON it hasn’t matter, what is the order of arguments passed in this config object. You can very easy add new or delete any of these arguments. As I mentioned above, syntax is similar to CSS. You can see it under this link. Or in the example below.

Ext.Msg.show

This method has only one parameter, which is a config object about which I mentioned above. Let’s look at example.

             Ext.Msg.show({

                title: 'Gender',

                msg: 'Exter your gender',

                width: 300,

                buttons: Ext.MessageBox.OKCANCEL,

                multiline: false,

                icon: Ext.MessageBox.INFO,

                prompt: true,

                fn: function(btn, txt)

                {

                    if (btn == 'ok')

                    {

                        //do sth

                    }

                }

            });


Result










As you can read in documentation: “All display functions (e.g. prompt, alert, etc.) on MessageBox call this function internally, although those calls are basic shortcuts and do not support all of the config options allowed here.”

Ext.Msg.wait

The last dialog which I want to show is Ext.Msg.wait. It can be use when you waiting for completion of certain process and it blocks the user interaction during it. This method takes three arguments:

           - message – the message in body
           - title –the title bar
           - config – the object in JSON format

Example

            Ext.select('.button').on('click', function()

            {

                var wait = Ext.Msg.wait('Installation..', 'Setup');

                var sec = 2;

                setTimeout(actionFunc, 1000);

                function actionFunc()

                {

                    if (sec < 10)

                    {

                        wait.updateText('progress: ' + (++sec)*10 + '%');

                        setTimeout(actionFunc, 1000);

                    } else

                    {

                        wait.hide();

                    }

                }

            });


In this example I have used a Ext.select. In this code, it selects button added manually to the page with css class attribute ‘button’ and fire the specified funcion when the button is clicked.
Ext.select will be cover in one of the next parts of these articles.

To use this example you must must add somewhere in the body this line:

            <input type="button" value="Click Me" class="button">











Summary

In this part I have shown the all major dialogs with examples how to use them. I have explained what it is JSON and the concept of config object which is using by most elements present in the Ext JS library. Posted on Sunday, August 30, 2009 6:16 PM Ext JS Tutorial | Back to top


Comments on this post: Interaction with user. Dialogs.

# re: Interaction with user. Dialogs.
Requesting Gravatar...
I find the artice about Ext.MessageBox class very helpfull, thank you!
Left by tragamonedas on Apr 29, 2010 8:35 AM

# re: Interaction with user. Dialogs.
Requesting Gravatar...
Very useful & descriptive. thanks
Left by Jayashree on Jul 06, 2010 8:52 PM

Comments have been closed on this topic.
Copyright © Łukasz Kuryło | Powered by: GeeksWithBlogs.net