EXT JS Working With Live Data

Now that we have defined our JsonStore and ColumnModel, we need to create GridPanel itself; directly following the constructor method for our ColumnModel add the following chunk of code:

//define the grid

var grid = new Ext.grid.GridPanel({

el:"productGrid",

width:700,

height:500,

title:"Products",

store:dataStore,

cm:cm,

});

The GridPanel is defined in the same way as the other components, using a constructor and passing in a literal object used to define its properties. This time we use the Ext.data.GridPanel constructor.

We specify the el property, which tells the component the element on the page that we want the GridPanel rendered into. The value of this property is the id of our container element. The dimensions of the grid are specified with the width and height properties, and a title for the GridPanel is defined. We specify our JsonStore with the store property and our ContentModel using the cm property.

All we need to do now is render the grid and load the data; this can be achieved with the following code:

//render the grid

grid.render();

//load the data

dataStore.load();

These two simple commands bring the components that we’ve defined together to produce a working GridPanel, which should at this stage look something like this:

Summary

The basis of our page is complete using three related components of the EXT-JS library. Join me in part two of this example, where we’ll be adding the PHP file that produces the data, and enhancing the functionality of the GridPanel.

-DOWNLOAD SOURCE-