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 an appealing error box (Page 4 of 4 )
As you might have guessed, building an error box by using the Ext JS framework is very similar to constructing a warning window like the one developed in the previous section. But you're probably scratching your head and wondering how an error box can be turned into an error window, right?
Well, it's pretty simple actually, since the process only requires embedding an error icon into the window in question. Period. Nevertheless, this explanation is pretty insufficient by itself, so here's the complete source code that builds the aforementioned error window:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
As you can see, the above example looks nearly identical to the one that I developed in the previous section, with a subtle difference. In this specific case, the message box includes an error icon, as demonstrated by the following line of JavaScript code:
icon: Ext.MessageBox.ERROR
That was really easy to understand, right? In addition, you should have a look at the image below, which depicts the visual appearance of the above error window. Here it is:
And with this concluding example, I'm finishing this series on building message boxes by means of the useful Ext JS library. As usual with my articles on web development, feel free to utilize all of the code samples included in this tutorial, so you can arm yourself with a solid background in this powerful JavaScript framework.
Final thoughts
As I said before, we've come to the end of this series. If you went through all of its tutorials, then you'll have a clear idea of how to use the Ext JS package to build really cool message boxes in a few minutes. Keep in mind, however, that this library also can be utilized to create Ajax applications, web page grids, dynamic forms, and so forth. If you want to discover all of its features, its official web site, located at http://extjs.com, is the best place to go.
See you in the next web development tutorial!
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.