EXT JS Passing Live Data

If you mouse over one of the grid headings you’ll see a drop-down appear. In the menu that opens when a drop-down is clicked, there is the option to show or hide any column, but the sortable options are grayed out. Enabling these is very easy and can be achieved with just one line of code. In gridExample.html add the following line of code directly after the ColumnModel code:

//allow column sorting

cm.defaultSortable = true;

This property causes all columns in the grid to be sortable. If we don’t want all of the columns to be sortable, we can enable sorting on selected columns by setting the sortable property to true on individual columns. Now when you run the page, you should be able to sort any column in either ascending or descending order:

There are a huge range of configurable properties that the ColumnModel can make use of in order to control the behavior of the columns. By default the columns are all resizable; to switch off this feature we can set the resizable property to false on each existing column definition:

//define the columns

var cm = new Ext.grid.ColumnModel([{

header:"Title",

dataIndex:"title",

width:170,

resizable:false

},{

header:"Image",

dataIndex:"image",

width:170,

resizable:false

},{

header:"In-Stock?",

dataIndex:"inStock",

width:70,

resizable:false

},{

header:"Price",

dataIndex:"price",

width:70,

resizable:false

},{

header:"Category",

dataIndex:"category",

width:70,

resizable:false

},{

header:"Manufacturer",

dataIndex:"manufacturer",

width:129,

resizable:false

}]);

Note that we can’t set all columns to resizable:false in the same way that we could configure all columns to be sortable. The only other general property like this is defaultWidth which will set the width of all columns.

As well as the properties we have used in this example, we can also make columns editable, hide individual columns, prevent columns from being hidden, set the alignment of the data, set CSS for column cells, disable the drop-down menu and specify tooltips for the column header, among other things.

There are also a whole range of properties that can be set on the GridPanel as well. For example, we can enable the addition of a load mask, which automatically adds a gray overlay and loading icon to the whole grid while the data is being retrieved. This can be enabled with the loadMask property, which should be added to the existing configuration object:

var grid = new Ext.grid.GridPanel({

el:"productGrid",

width:700,

height:500,

title:"Products",

store:dataStore,

cm:cm,

loadMask:true,

});

The load mask will probably only be visible to you for a second or so when testing locally, but your visitors will be reassured that something is happening behind the scenes while they wait for the data to be loaded, as this is likely to take longer in a live scenario.