In a recent article we looked at the Date-Picker control from the world-class EXT-JS JavaScript library. In this article we’re going to be looking at a series of utilities and controls from the library which let you work with live data including the GridPanel, the PagingToolbar and the JsonReader components. These powerful tools can be combined in numerous ways to provide a robust solution to retrieving, formatting and displaying live data.
EXT JS Working With Live Data - Defining the DataStore (Page 3 of 4 )
There are three distinct parts of any GridPanel implementation: the DataStore, the ColumnModel and the GridPanel itself. All three of these are supported by their own individual classes, and all have a range of configurable properties and methods to invoke different functions. The DataStore should be defined first; within the anonymous function, add the following code:
We’re using the JsonStore in this example because of its convenience; there are several different types of DataStore that can be created, but when using other types of DataStore additional components are required, such as a DataReader to read the data that is obtained into records, and a Proxy, with which to obtain the data in an AJAX way. One of the benefits of JsonStore, other than the fact that you can use JSON as a data exchange format, is that it has both a Proxy and DataReader built into it, so you don’t need to worry about defining these separately.
We define our dataStore using the Ext.data.JsonStore constructor, supplying an object literal containing the required configuration properties as an argument. Three properties are used. The url property sets the URL that the JsonReader will request its data from; the root property sets the root property with the JSON object that the data should start to be read from (this is very similar to setting the root of an RSS document when working with XML); and the fields property sets the fields within each record that match the properties that contain data within the JSON object.
For reference, the structure of our JSON object will be as follows:
The root property of our JSON object is the products property. The value of this property is an array, and each item in the array is another object. This object has as its properties the names of our different categories of data, with the actual data as the values of these properties. This makes addressing the data extremely easy (although we don’t actually need to worry about this in this example, as the DataReader built into our JsonStore will take care of this for us automatically).
When the JsonStore receives this object, it will read each item in the array into a record (an Ext.data.Record object, to be precise). Each record can be thought of as an associative array, with each item in this array corresponding to one value from the properties within our JSON object. The whole DataStore can be thought of as one big multidimensional associative array.
Creating the ColumnModel
Next we should define the ColumnModel that we want our GridPanel to use as the template for its structure; directly after the code used to create the initial JsonStore, add the following code:
//define the columns
var cm = new Ext.grid.ColumnModel([{
header:"Title",
dataIndex:"title",
width:170,
},{
header:"Image",
dataIndex:"image",
width:170
},{
header:"In-Stock?",
dataIndex:"inStock",
width:70
},{
header:"Price",
dataIndex:"price",
width:70
},{
header:"Category",
dataIndex:"category",
width:70
},{
header:"Manufacturer",
dataIndex:"manufacturer",
width:129
}]);
OurColumnModel is created using theExt.data.ColumnModel constructor; this function takes an array as an argument where each item in the array is an object that represents one individual column and sets different properties that define its presentation and behavior. There are many properties that can be used to define these columns, and they do not all need to take the same properties (although they do in this example).
The properties we are configuring for this example are theheader property, which defines the text label for each column’s heading; thedataIndex property, which should match one of the fields from ourDataStore records; and thewidth property, which defines the width in pixels of the column.
JavaScript 
HTML5 Boilerplate: Working with jQuery and Modernizr
