Book review: Learning ExtJS 3.2
My background
My first contact was quite accidentally when I heard of Javascript frameworks for the first time. There was a web project on my table. Of course the project was already overdue the day it was started so I barely had any time playing with Javascript frameworks. Back then I was pretty inexperienced and compared jQuery to ExtJS which is worse than apples vesus oranges. (Unfortunately I even blogged about that while I was in a hurry which made me look like a total jerk. I was annoyed by the loads of negative feedback but I totally deserved it.) jQuery is McGyver's swiss knife while ExtJS is rather a space ship. jQuery is great for pimping web applications. It's a toolbox rather than a framework and adds interactivity to my web applications. jQuery was the right choice for my project back then. But that wasn't ExtJS's fault.
Recently I started refactoring an application I made with classic forms in an ugly looking layout with strange inconsistent control elements. I figured that I needed elements that ExtJS already shipped with: grids, layouts, form validation. Actually the application might have better been a desktop application but I had no experience with Gtk, Qt and wxPython so I stayed with technology I knew. Besides I could deploy a new version of the application centrally without having to make people use updated installers every week. And from what I learned ExtJS-based programming is not too different from desktop GUI frameworks anyway. There are widgets to be initialized, events to be attached and everything else is event-driven and handled by the framework.
What ExtJS is good for
Who the book is for
Chapter 1
Getting started with ExtJS caused me a lot of headache the first time I tried. I made stupid noob mistakes, didn't find a good way to debug the Javascript code and didn't take enough to time to get acquainted with the principles of ExtJS. This chapter offers a quick introduction on Javascript. Everything is an object. And so all ExtJS widgets are objects which get instantiated to use them. ExtJS works more like a GUI library that is used to create desktop applications. In "Web 1.0" applications the HTML dictates how a page looks and is complemented with some Javascript to add interactive elements. ExtJS works the other way round: there is barely any HTML and your Javascript code makes use of ExtJS to automatically create all the HTML that in the end is a beautiful fully-working web application.
The first chapter shows a set of available widgets from the "feed viewer" and "simple tasks" examples that comes with ExtJS. It does not explain their code though because these examples would be too sophisticated for a beginner. The chapter further explains event-driven interfaces. Basically when an ExtJS application is set up (the HTML is rendered and initial Javascript code was run) then mouse moves and clicks and button presses are treated as events. You can add functionality to these events to customize its behavior. And AJAX is briefly explained.
Finally it's time to download and unzip the 14 MB ZIP file of the Ext JS Software Development Kit which consists of Javascript, images, style sheets, lots of examples and the API reference - over 5000 files. You can download the open-source version for playing around. Keep in mind though that ExtJS can only freely be used if you put your projects under the GPL license. This may not sound bad but for a library the GPL license is arguably a weird choice. On the other hand I understand that ExtJS is a complex and high-quality Javascript UI library and its makers also want to make money with it if you make money selling software that uses ExtJS.
The book covers version 3.2.0 while my download was version 3.3.1. But the basic directory structure was identical and explained well in the book.
And finally as a "hello world" example the chapter gives a minimal HTML template that loads the Javscript and style sheet (CSS). The need for a 1x1 spacer image is explained. And an alert box was raised. I was on page 17 of the book, had a 22-line HTML file loaded in my browser (using Google Chrome here) and a nifty dialog box (using Ext.Msg.alert) showed me that I did it all right. I like it if a book gives me a quick achievement to keep me motivated. Very nice. And what's worth noting: you don't need any web server running. Just point your browser to the static HTML file from your hard disk and the example will run. And what may be confusing for the old-school web developers: the BODY is actually empty. :)
Next "adapters" are explained. Early ExtJS versions were based on YUI, jQuery or Prototype - three other Javascript frameworks. Nowadays there is a native "Ext" (loaded as "ext-base.js") adapter so you don't need these any more. But if you are using jQuery anyway then you can keep using it as a foundation for ExtJS.
ExtJS also supports over 40 translations so the widgets will work just right in your language. Note that the book assumes the locale files in build/locale while they are in src/locale. I had a german-localized widget with just an additional line of code.
And finally the chapter explains the available online resources: the excellent API docs, the forums and the FAQ.
Chapter 2
The second chapter first deals with config objects. This is how you tell widgets how you want them to look and work. Config objects are just a way of passing named parameters to a widgets. They are a nested data structure telling ExtJS what you want a widget to look and behave like. The book shows a couple of real-life examples here.
Hint: take good care of trailing commas. Parameters are seperated by commas. But don't use something like
{ foo: 'bar', }
While Firefox may be forgiving you will surely run into trouble with Opera and IE. So you better get that right.
Using the knowledge about config objects the book shows how to set up and open a message box with a title, message and buttons. And depending on which button the user pressed further actions are run.
On page 33 there seems to be a slight mistake though. The "milton-icon" style declaration should rather be ".milton-icon" which will add an icon to the dialog box. And of course the icon file referred to (milton-head-icon.png) has to be created. I'm sure it's in the examples ZIP file that I could download.
Next Ext.get (and its cache-less brother 'Ext.fly') is explained which is a function to get access to DOM objects (e.g. DIVs). But it does more like adding methods to the resulting object so that you can for example animate or center the object in question.
Previously the examples used an empty BODY section. So one section of this chapter explains how to re-use the existing body as part of a panel. One way is creating an Ext.Panel with a contentEl element containing the actual content. Or with a panel using an Ext.BoxComponent object as an item.
Now this chapter showed how to create widgets just the way we want. I just felt a little lost in the examples. The first examples tempted me to do what the author did and I was happy. But the last two examples were rather something I just accepted the way they are and maybe look at them again later if I should need them. This chapter could really have explained more what the configuration option in such a "config object" are good for. Like what's a layout called "fit"?
Chapter 3
On to the next chapter dealing with an important element in any data management application: forms. Forms are more than just a collection of input fields. They need to accept different kinds of data. The user should get feedback whether a certain input is valid in a certain field. And a user can be helped with entering a date by showing a calendar.
Form fields are defined by their "xtype". These correspond to ExtJS components. E.g. an xtype of "textfield" creates an instance of Ext.Form.TextField. The "vtype" is used for verification of whether what the user typed into that field is correct. And a special feature called "masking" even checks whether a key the user pressed is accepted or not. For example you could limit the entry to numbers. And the chapter explains how to defnie your own custom vtype using regular expressions.
Further form elements are radio groups and my favorite: the combobox. The latter behaves like an input field with autocomplete. There is an example using an Ext.data.SimpleStore to load static data. And the book explains how to use a PHP script to pull backend data in the JSON format. This requires a web server (e.g. Apache) on your system that can run PHP scripts. And another powerful form field is the HTMLEditor which is a simple WYSIWYG editor that supports formatting to have the user enter so called "rich text".
I was a little confused why the examples use Ext.data.SimpleStore while the book uses Ext.data.ArrayStore but maybe the API of ExtJS has just changed between the book's version of ExtJS and the version I downloaded.
And finally the chapter deals with form events. For example you can map the enter key to submit a form.
Chapter 4
The fourth chapter deals with menus, toolbars and buttons. It gives several examples for toolbars and the kind of widgets that can be used there. There are many interesting examples in this chapter that deal with different button types, how buttons can be seperated and aligned on the toolbar.
Chapter 5
In my opinion the most interesting ExtJS widget is a grid. Grids work like interactive tables that contain one row per data record and can be customized and styled in unbelievably many ways. Even the first example dealt with specially styled rows which made me wonder "oh, you can do that, too?".
Grids use data from a backend. The fields used in each object are defined as a record definition. Next you need to set up a reader that tells ExtJS how to fetch the information - e.g. using an HTTP call to the backend expecting a JSON object. As I said in the introduction I had a bad start with ExtJS because barely anything I tried worked properly and at some point I gave up. This chapter however helped me get up a working grid in half an hour and I could already imagine how my application could make use of grids.
The chapter further deals with different types of columns. Like the data can be dates, numbers of even HTML templates that use data from the records freely.
Grids have so many features like hiding columns, sorting in the browser, asking the backend for sorted data, pagination (splitting up the result set into pages that can be navigated back and forth), column reordering or filtering the results. Of course this requires some smart script in the backend that prepares the data for the grid and handles pagination, sorting and filtering.
Chapter 6
This chapter is still dealing with grids but uses the "in-place editing" feature. Such grids look the same like normal grids for the user. But when a table cell is clicked it turns into an input field allowing the user to change that value. This is way more user-friendly than changing to an edit form, saving the form and returning to the table. This kind of grid needs a little more code to be set up though.
There are basically two ways to edit data. Either by editing a cell. Or by using the RowEditor plugin which turns a complete row into a mini form to change the data within.
Chapter 7
While the previous chapters dealt with widgets they were just placed in the body. But a serious web application will need more widgets and even a little navigation aligned properly on the screen. At first I found myself falling back into using a table-based or CSS-based layout to put the widgets where I wanted. But I quickly realized that I can do ExtJS do the work using its concept of "layouts". Layouts work for regions in existing pages (e.g. a DIV) or you can let ExtJS occupy your whole screen and render HTML content or widgets in there. You won't see a scrollbar because ExtJS is just occupying 100% horizontal and 100% vertical space.
ExtJS comes with several different layouts that serve different purposes. They are best explored in demos on the ExtJS website to get an impression.
It's quite interesting that with ExtJS you can nest layout. For example in a three-column layout the middle column can contain a further tab/card layout.
Chapter 8
Another way of navigating hierarchical data that otherwise used to give me a headache is using a "tree". Trees in ExtJS are astonishing widgets. You can not only expand subtrees by clicking on "+" icons but you can even allow dragging and dropping of tree nodes to allow sorting the tree. Or you can drag nodes from one tree to a completely different tree.
The hierarchical structure of a tree ca be creating using different formats like JSON or XML. Dragging and dropping elements of the tree to other positions is also much simpler than I thought - it's basically a matter of setting a flag. The book shows the code necessary for the backend to get informed about that movement. Further explained features are sorting and in-place editing of a tree node's text as well as selecting multiple nodes or filterig nodes. And there are more ways to customize the behavior or remote-control a tree.
Chapter 9
This chapter deals with windwos and dialogs. What I first used as a toy and to improve the users of one of my web applications is way more serious and helpful if you think of windows like on your desktop. You will often keep multiple windows open to work them in parallel. A windows is working just like on the desktop - it's a moveable area containing further widgets and content. A dialog is usually just a simple string input, "OK" or "Yes/No" box - but you can also use it to show a progress bar. Windows are very versatile. They can have a certain layout to display text or widgets in rows or columns.
Chapter 10
A feature I haven't yet used seriously are charts - or as a former colleague used to call them: "management porn". :) ExtJS uses Flash applets to show different kinds of charts like pie charts, bar charts or line charts. so if you don't mind using Flash on your site then it's pretty easy to display numeric values graphically and style the charts the way you want. This is no plotting library though. The possibilities are more like the chart feature of your favorite spreadsheet application.
Chapter 11
ExtJS already contains enough widgets to give your application the "Wow" effect. But it also lets you add further effects which is the topic of this chapter. Effects can be annoying if overused but also very useful in the right places. The "transitional" animations for example show how a widget changes to a new state which looks more natural. For example a tree widgets expands slowly if the user clicks on the "+" symbol. The user does't just see a sudden change and has to guess what has actually changed.
The basic effects described her are fading out an object, framing (an expanding frame highlights an object), ghosting (that usually happens when you drag e.g. windows around), highlighting a object by flashing the background in yellow and further effects. The easing - the change of velocity during a movement - is explained briefly. It allows you to bounce an object at the end of a movement or to speed it up or slow it down. These effects can be glued together and then run sequentially (while in jQuery you need a more complex nested functionality of callbacks because effects run in parallel). But they can be run concurrently, too, if so desired.
An effect often used with AJAX calls is the "masking". While the backend server is queried for certain data the current widget gets greyed out to mark it unusable. Another user-friendly feature is the "quicktips" which shows a popup with further explanations while the mouse is hovered over a certain object - for example an input field.
Chapter 12
This chapter deals with the drag-and-drop feature that is less often used in web applications than in desktop programs. When dragging objects ExtJS can use a "proxy" which is a small popup-like windows that is moved on behalf of the actual object. This uses less CPU power while moving the object and works better for large widgets that would otherwise use too much space to draggig them properly.
The book provides example code on how to provide a "drop" zone where objects can be placed. By default ExtJS does nothing unless a certain method is overridden by code that tells ExtJS what should happen. I never got drag-and-drop working before and the hints in this chapter told me why. (I once tried to make nodes of one tree draggable to the other tree but failed.) This feature really can be tricky but it's also very customizable as show in various examples throughout this chapter. Moving nodes across a tree - filling an address form with data from a user object - these are all very practical uses for dragging things.
Chapter 13
If the existing widgets are not yet what you need in a special application then this chapter explains how to even further extend ExtJS. I must admit that I haven't tried out any of the examples. This chapter deals with basics of ExtJS's object-oriented design and how inheritance ad overriding works.
Chapter 14
Similar to the previous chapter but less hardcore this chapter deals with plugging in own functionality. The author described how to extend a typical ExtJS grid by a quick-search field that allows to filter a grid's results.
Chapter 15
This chapter deals with data formats and how data is exchanged with a backend web server. It starts with a simple example loading HTML from a web server and inserting it into a Panel widget. I skipped the ColdFusion example though because I have never used that technology. Basically ExtJS can use plain text, HTML, JSON or XML to pass data along. What kind of backend you use is your choice alone. The books's examples are mainly PHP while I'd prefer using a Python-based framework. An interestesting part of the chapter dealt with custom DataReaders that help use data in a proper way even if the server sends the information in a weird way and can't be changed easily. Furthermore both client-side and server-side filtering
Chapter 16
Another data-related topic is dealt with in chapter 16 explaining the Ext.Direct class. Many times in an application you deal with CRUD (create/read/update/delete) and Ext.Direct helps simplify this by building an API to communicate with the backend. I'm not too happy with the ColdFusion example because I don't know anything about it. Some PHP code had helped me better.
Chapter 17
The final chapter gives an overview of what else you can accomplish with ExtJS. This includes forms and fields, the build-in WYSIWYG editor, data formatting, browser history and state-keeping and accessing and manipulating DOM elements. One feature I haven't yet used but I hope to find the time to play with it is Adobe AIR (Adobe Integrated Runtime). It's a platform-independent way to run server-less web applications using a built-in SQL database. That way you can create offline web applications.
Conclusion
Sometimes I found the examples hard to understand or reproduce until I found that the examples can be downloaded from Packt's website. I'm not sure whether buyers of the paper edition can download the ZIP file, too. It's really helping to play with the examples. The first examples don't contain any PHP and can be renamed from *.php to *.html to play with them. Only a few examples really need PHP and a backend database to work and I just skipped them.
It shows that the author really knows what he's talking about. The examples are not just an introduction of how things might work. The idea is always turned into a fully working piece of code leaving none of my questions unanswered.
I must admit that I was not always happy with the examples though. There is often no syntax highlighting used and the examples sometimes reach from one page to another. It doesn't make it easy to follow. In addition the author often introduces slight changes from one example to the next without highlighting what exactly has changed. Then again some examples suddenly printed the changes in bold letters. I found myself "diff"ing the examples to find that out. But all in all this is just a minor flaw.
What I liked are the tiny hints helping to find the cause of stupid programming mistakes by describing the effect. For example one hint tells that using the same DOM id multiple times leads to a DOM object suddenly displayed in the top left corner. Next time I'll have that effect I'll surely remember that the authors mentioned that. It also shows that the authors have done real work with ExtJS. :)
This book is more than just an introduction. After all it's 408 pages long for a reason. The official ExtJS documentation contains both a beginner's tutorial and a full-blown API reference. Both didn't help me get along. I needed something in the middle. And this book filled right in. Finally I managed to get a grid running and I'm confident that I know how to further develop my web application. So I definitely recommend the book for ExtJS starters. What I'm missing though is how all the components can work together - like starting from a login dialog up to structuring a entire large web application. Maybe the "Ext JS 3.0 Cookbook" covers that - let's see if I get a chance to review it later.
The contents of this web site is Copyright © 2000-2011 Christoph Haas - Impressum/Imprints - Donations welcome
Drupal theme by Kiwi Themes.
Recent comments
22 hours 44 min ago
1 day 33 min ago
1 day 42 min ago
1 day 22 hours ago
3 days 21 hours ago
5 days 11 hours ago
6 days 7 hours ago
6 days 9 hours ago
1 week 1 hour ago
1 week 2 hours ago