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.