Ext Message Box in ColdFusion
Going forward with the new project I thought I would look at some new functionality. One reader already asked me about the message box class in Ext. I started writing some code tonight and I wanted to get some feedback on this as well. Before we look at some code we need to think about why we use the different message boxes. Ext comes with the following types of message boxes.
- Alert - Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt)
- Confirm - Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's confirm).
- Prompt - Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to JavaScript's prompt).
- Progress - Displays a message box with a progress bar. This message box has no buttons and is not closeable by the user.
As you can see these types of message boxes are comparable to JavaScript dialog boxes. So we would probably use them in the same scenarios. An alert box is great for notifying a user that some action took place, a confirm dialog would be good to ask a user for confirmation and a prompt is great for collecting data. If anyone has more specific use cases I would like to know so I can work up some examples for what you might use the message boxes for.
Time to check out some code. So sticking with the same theme as cf_window we need to make it easy to create and use. The first thing I did was make it so that all of the message boxes are created in the same manner. To tell them what type of box they are we just pass a type attribute. Valid types would be alert,confirm,prompt and progress. The example below would create a basic alert box and could then be made visible using the id as the function call.
<html>
<head>
<title>Ext Message Box / Basic Alert</title>
<ext:include widget="messagebox" adapter="ext"/>
</head>
<body>
<ext:msg id="showAlert" type="alert" title="Status">
Changes saved successfully.
</ext:msg>
<a href="##" onclick="showAlert();">Show Alert Box</a>
</body>
</html>
In a bit more advanced message box we could assign a handler function. In the case of our alert box we want to know if the user clicked ok or closed the message box using the close button. To accomplish this we assign our handler using the handler attribute and pass the btn to our handler method.
<html>
<head>
<title>Ext Message Box / Basic Alert</title>
<ext:include widget="messagebox" adapter="ext"/>
<script type="text/javascript">
function myHandler(btn) {
if(btn=='ok') {
// do something alert("ok");
} else {
// user closed box alert("closed");
}
}
</script>
</head>
<body>
<ext:msg id="showAlert" type="alert" title="Status" handler="myHandler">
Changes saved successfully.
</ext:msg>
<a href="##" onclick="showAlert();">Show Alert Box</a>
</body>
</html>
