Building Warning and Error Boxes with the Ext JS Library
Welcome to the final installment of a five-part series that explains how to build cool message windows with the Ext JS library. This series steps you through creating several interactive message boxes using the Ext JS JavaScript framework, which can speed up the development of rich Internet applications.
Building Warning and Error Boxes with the Ext JS Library - Building a warning box with the Ext JS framework (Page 3 of 4 )
Building an appealing warning box with the Ext JS framework is a very simple process that only requires changing one of the input parameters accepted by the "show()" method that belongs to the "MessageBox" JavaScript class used previously.
Yes, I know that it's hard to believe, but a warning window can be created just like a regular box which simply includes a warning icon. That's not rocket science! So now it's time to show you how this box can be built using the Ext JS package.
Below I coded another practical example, which builds the warning window. Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
As demonstrated above, the pertinent warning box is built by using a regular informative window that specifically includes a warning icon. Of course, you'll get a better grasp of how this construction process is performed if you look at the following line of JavaScript code:
icon: Ext.MessageBox.WARNING
As you can see, in this particular case, the corresponding warning icon is embedded into the message window before being displayed on screen. In addition, the visual appearance of this box can be seen pretty clearly in the screen shot below:
After having analyzed the previous hands-on example, you'll have to agree with me that building a professional warning window by way of the Ext JS library is actually a no-brainer process that can be tackled even without being a JavaScript guru!
So far, so good. At this level, you hopefully grasped the logic that stands behind building a few informative boxes with the Ext JS package. However, as I noted before, the library supports the creation of four different kinds of windows. Up to now, I've discussed three of them, meaning that there's a final one, called "error box," which still remains uncovered.
Provided that you're interested in learning how this last message window can be constructed with the Ext JS library, the final section of this article will be dedicated to explaining the full details of this process.
Click on the link included below and keep reading. We're almost finished!