The Book’s Structure

The book comprises “109 great recipes for building impressive rich internet applications using the Ext JS JavaScript library” (according to the front-cover—although I notice that the slogan on the picture above is different to my copy).

Each recipe starts with an introduction to the problem, and then a ‘How to do it…’ section. This is usually followed by a ‘How it works…’ section—where Jorge goes a little bit deeper into the inner workings of the Ext JS library. This is, I think, where the book shines. At lot of the examples in the book don’t seem to be any more special than the samples provided by ExtJS, but this added depth and explanation gives the examples more value than the ExtJS samples.

The book is split into ten chapters:

1. DOM and Data Types, the Ext JS Way
2. Laying Out a Rich User Interface
3. Load, Validate, and Submit Forms
4. Fun with Combo Boxes and Date Fields
5. Using Grid Panels to Display and Edit Tabular Data
6. More Applications of Grid and List Views
7. Keeping Tabs on Your Trees
8. Making Progress with Menus and Toolbars
9. Well-charted Territory
10. Patterns in Ext JS

The structure of the book is a little strange. It works fine as a reference book, but when reading from cover to cover, the concepts in the recipes rarely seem to flow from one to the next. For this reason, I think the book may not be ideal for beginners. It also means that some explanations get repeated in different recipes. However, the reference style of the book is benefitted by the ‘See also…’ section at the end of each recipe, which directs you to related recipes.

The book would have gained, I think, from an initial chapter introducing Ext JS, rather than jumping straight into methods for detecting the user’s browser—which isn’t a particularly interesting topic to start on anyway.

Code Samples

The book is largely made up of code samples, as you would expect. However, I have a few small criticisms to make of the code:

• I feel that some of the samples are longer than they need to be (often a few pages long—the portlets recipe consists of nine pages of code interspersed with a few comments).
• The choice of variable names is sometimes poor (although this may be following from the Ext JS convention).
• Occasionally the formatting of the code is unhelpful—I noticed a comment had been wrapped, and on some examples the indentation was inconsistent.
• Some of the code lines are highlighted in bold to make them stand out, but I found that quite often this was over-used, or highlighted the wrong areas—so turned out to be not so helpful.

This is nit-picking really though—the code is generally quite appropriate to the topics in question, and if you’re familiar with Ext JS, you shouldn’t have problems understanding the code—but I’d have expected more attention to these areas by a publishing company that has probably never published a book without source code.

Screenshots

Some of the screenshots are not very clear and the annotations are sometimes a little confusing. In one case, the same half-page screenshot seemed to get duplicated four times, with very minor changes between them.

A little colour and better annotations would have really benefitted the book, especially since it is largely focussed on user interface design (and RRPs at £30.99/$49.99!)

Further Observations

I was surprised to see the occasional use of PHP, which didn’t actually seem to be required to explain the topic. Giving a snippet of raw JSON may have been more appropriate.

I’m not sure how other books from Packt are structured, but I think the book would have benefitted from ’side boxes’ in the margin giving little extra hints, or explaining certain parts of the code in more detail. In my experience, this is a common and useful feature of computing books.

Conclusion

It was very nice to see a chapter on the use of design patterns in Ext JS. This is a topic that I found difficult when I started working with the library, and I didn’t manage to find much helpful material online at the time. The recipe on creating customised ‘vtypes’ was also interesting.

I feel like I’ve come up with plenty of criticisms, but in general I think the book is worth reading, even if just for the ~50% original material (which isn’t already available on the Ext JS samples page), and for the brief-but-valuable explanations of how things are working ‘under the hood’.

As a reference book, it feels very complete. I haven’t been able to think of any topics that it misses out. Mixing the recipes together should result in a substantial meal, and some very satisfied clients.

Thank you Packt for sending me the book, and thanks Jorge for putting so many useful examples together in one resource.

Update: I requested a link to some sample content: here’s the whole of Chapter 3, Load, Validate, and Submit Forms, for you to download.

Ext JS is yet another JavaScript library. However the emphasis is on UI widgets that allow you to build user interfaces in the browser. The concept is far from new, but the way Ext JS stands out from the contenders must be embarrassing. The library’s widgets are visually stunning, feature-rich, and yet still maintains high performance.

I will admit that I hadn’t heard of Ext JS before working on a project last year that used it. I’ve been doing freelance web development for about five years and I tend to keep quite up-to-date with web technologies, so I’m surprised that it had slipped under my radar.

Fairly recently, the team announced the latest release candidate of Ext 3.0. I wanted to experiment with some of the lesser-hyped new features, and so I’ve been working on a small experiment to display stock indexes using the new charts feature.

Hello, world!

Let’s start by walking through a really simple Ext example before we look at the charts.

Download the latest Ext release. Setup a simple HTML page and add a few includes:

1
2
3

<link rel="stylesheet" type="text/css" href="ext-3.0-rc3/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0-rc3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0-rc3/ext-all-debug.js"></script>

At this point, we should be able to load the blank page in the browser without any errors.

The next step is to write some code to do something with the Ext library. So as not to upset the gods, we’re going to make a pop-up ‘hello world’ window. The following is JavaScript code, so put it in a <script> tag or an external .js file.

1
2
3
4
5
6
7

Ext.onReady(function() {
  new Ext.Window({
    title: 'Hello, world!',
    width: 280,
    height: 120
  }).show();
});

We use Ext.onReady(...) to setup a callback for when the DOM is loaded. This callback will create a new Ext.Window object, and show it. The parameter to the Ext.Window constructor is a configuration object.

The concept of configuration objects is used extensively throughout Ext, and it can be rather fiddly and difficult to get used to. You have to keep the Ext documentation open (see below) to know what parameters to use. In our simple example, all we do is specify the title and dimensions of the window.

Load the page in your browser. The result should look something like this:

Notice that you can drag the window around the screen and resize it to your hearts content.

See the demo or download the code.

For a nice collection of more advanced examples, check out the samples on the Ext site (they are also contained in the Ext download). These samples are great. My only criticism is that they can be a bit inconsistent in the way they implement features.

Another indispensable resource is the Ext documentation (this is also included in the download).

Ext JS Charts

In a way, it’s a shame that Flash has been used to implement the charts feature, since the library has achieved so much without resorting to it in the past. Nevertheless, the actual Flash applet has been well contained and even resizes smoothly with it’s container.

We can build on our simple example from above to add a chart to the window.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Ext.onReady(function() {
 
  var store = new Ext.data.JsonStore({
    url: 'data.php',
    baseParams: {
      symbol: 'GOOG'
    },
    autoLoad: true,
    root: 'data',
    fields: ['date', 'close']
  });
 
  new Ext.Window({
    title: 'GOOG',
    width: 400,
    height: 300,
    items: [
      new Ext.chart.LineChart({
        store: store,
        xField: 'date',
        yField: 'close'
      })
    ]
  }).show();
});

We are introducing two new concepts here. First of all, the use of a ’store’. In this case, a JsonStore. To quote the documentation:

The Store class encapsulates a client side cache of Record objects which provide input data for Components [...]

So basically, the store takes care of fetching and storing our data. The JsonStore uses a JsonReader to fetch the data in JSON format, keeping the data completely separate from the UI component. The data is then represented internally as a series of Records.

Let’s look at the configuration parameters we have set. The first parameter, url, is the URL that we will be loading the data from and baseParams specifies the parameters to send to this URL. By default the store doesn’t attempt to load the data straight away, so we specify the autoLoad parameter so that we don’t have to call store.load() ourselves later on. The root parameter tells the store where to look in the returned object for the bulk of the records, and fields is a short-hand way to specify the structure of the individual records.

The second new concept we have introduced is the addition of a component to the window. We have done this by specifying an array of components in the ‘items’ property. The single item that we are adding is a LineChart component. The configuration here just links the component to the store we have defined, and specifies the fields to bind to the axes of the chart.

Once the store has been loaded, we should end up with this:

See the demo or download the code.

The current Ext documentation for styling the charts is fairly minimal. Since the underlying Flash applet for the charts is based on the one from the Yahoo UI Library, further information on styling the charts can be obtained from their documentation.

Fetching the Data

Let’s take a look now at the server-end of the process.

The data is generated by a PHP script which in turn gets the stock data from Yahoo. Yahoo kindly provide a CSV-formatted data set of the daily stock prices (including open, close, high and low values) which go back about five years. We don’t want to be pumping this much data to the browser, so we will take a few steps:

1. Fetch the data if not already cached
2. Extract the closing price for each day
3. Cache the data
4. Choose an appropriate range of dates to display
5. Sample the remaining data to leave us with a suitable number of points that can be plotted
6. Return the data encoded as JSON

We now have a simple web service that allows us to specify a number of parameters:

• symbol — The stock ticker symbol. Required. Note that because we are using the Yahoo stock data we are limited to stocks listed on the NASDAQ.
• start — The start date. Specified as a Unix timestamp. Defaults to roughly one year ago.
• span — The timespan to get data for. Also given as a Unix timestamp. Defaults to roughly one year.
• points — The number of points to sample. Defaults to 20.

An example result from the service would look a little like this:

1
2
3
4
5

{"symbol": "MSFT", "data": [
  {"date": "2008-07-24", "close": 25},
  {"date": "2008-08-12", "close": 28},
  //...
]}

I won’t paste the PHP script here. It can, however be downloaded.

Once the data has been successfully loaded, an event is raised, which the chart has been listening for. The chart can then re-draw itself using the new data.

Taking Things Further

In an attempt to mature our example a little, and to highlight a few of Ext’s other features, I’ve put together a more substantial example. See the screenshot below, and refer to the live demo.

I won’t go into much detail here, other than to list some of the features that I’ve used:

• A Viewport together with the BorderLayout to ensure that the interface takes over all the space offered by the browser window.
• A modal pop-up window which contains an auto-complete ComboBox. A list of the NASDAQ-100 are presented for the user to choose from.
• A TabPanel to organise the different stocks that have been loaded. Selecting a different tab will change the chart being displayed, and closing a tab will unload the data and chart.
• A ListView component, which is the new lightweight version of the GridPanel.
• Some more advanced features of the Chart object—including making use of the TimeAxis, linking mouse movements to the ListView component, and making some changes to the chart’s style.

I have left the JavaScript un-minified so feel free to take a look at it.