EXT Ajax Grid Part 3

Posted At : July 25, 2007 5:24 PM | Posted By : Gary Gilbert
Related Categories: Ajax,EXT,Javascript

In this post we will begin to dissect the javascript code used to create the EXT Ajax Grid.

In Part 1 I simply introduced you to the Javascript in a complete example without really explaining any of the code.

I will do my best to break it down in to manageable chunks. Starting with setting up the Anonymous function and then going onto setting up of the data store.

Here is the complete Javascript block once again for reference:

Ext.onReady(function(){
// create the Data Store
var ds = new Ext.data.Store({

proxy: new Ext.data.HttpProxy({
url: '../com/gg/ajaxwrapper.cfc?method=getfiles',
            method:'post'
}),
// set up the data reader

reader: new Ext.data.JsonReader({
root: 'data',
totalProperty: 'recordcount',
id: 'name'
}, [
{name: 'name', mapping: 'name'},
{name: 'size', mapping: 'size',type:'int'},
{name: 'directory', mapping: 'directory', type: 'int'},
{name: 'datelastmodified', mapping: 'datelastmodified', type: 'date'}
]),

// turn on remote sorting

remoteSort: true
});


ds.setDefaultSort('datelastmodified', 'desc');

    function renderdate(value){
return value.dateFormat('M j, Y, g:i a');
}
// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store

var cm = new Ext.grid.ColumnModel([{
id: 'name', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "Name",
dataIndex: 'name',
css: 'white-space:normal;'
},{
header: "Size",
dataIndex: 'size',
width: 100
},{
header: "Directory",
dataIndex: 'directory',
width: 70,
hidden:true
},{
id: 'datelastmodified',
header: "Last Modified",
dataIndex: 'datelastmodified',
width: 200,
renderer:renderdate
}]);

// by default columns are sortable

cm.defaultSortable = true;

// make the grid resizable, do before render for better performance

var rz = new Ext.Resizable('file-grid', {
wrap:true,
minHeight:100,
pinned:true,
handles: 's'
});
rz.on('resize', grid.autoSize, grid);

// render it

grid.render();

var gridFoot = grid.getView().getFooterPanel(true);

// add a paging toolbar to the grid's footer

var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 10,
displayInfo: true,
displayMsg: 'Displaying files {0} - {1} of {2}',
emptyMsg: "No Files to display"
});
// trigger the data store load

ds.load({params:{start:0, limit:10}});
});

The first line of code we have is the Ext.onReady(function(){ This sets up an anonymous function that will fire before onload and before images are loaded. The function creates a Javascript class that contains the methods and properties needed to construct the grid.

The next few lines of code are responsible for setting up our 'datasource' or data store:

var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '../com/gg/ajaxwrapper.cfc?method=getfiles',
method:'post'
}),
// set up the data reader

reader: new Ext.data.JsonReader({
root: 'data',
totalProperty: 'recordcount',
id: 'name'
}, [
{name: 'name', mapping: 'name'},
{name: 'size', mapping: 'size',type:'int'},
{name: 'directory', mapping: 'directory', type: 'int'},
{name: 'datelastmodified', mapping: 'datelastmodified', type: 'date'}
]),
// turn on remote sorting
remoteSort: true
});
ds.setDefaultSort('datelastmodified', 'desc');

We pass the constructor for the data store an object containing the config options for setting up the data store. This configuration object can contain a proxy, reader, remotesort, baseparams, and sortinfo options.

Proxy:

Here we use the HttpProxy class to set up our remote data url and specify the our method. If the url is not in the same domain we would have to use the ScriptTagProxy class instead.

Reader:

The reader can be one of three classes of readers, ArrayReader, JsonReader and XmlReader. Each reader takes slightly different configuration properties. The type of reader we are setting up here is a JsonReader, and also takes a record definition where we specify the internal data name as well as the column name in the returned record set and also a datatype.

RemoteSort:

The final config option we are using is the remotesort option. In this example I turned the remote sorting to true this causes an HTTP request each time one of the column headers are clicked with the column name and sort direction as parameters. Our server side function will then perform a query and sort the results according to the passed in arguments.

The last line of code in above block calls the method setDefaultSort. This method as one would guess sets the values of the parameters "sort" and "direction" that get sent with every call to our component. These values only get set when someone clicks on a column header so we need specify defaults until that happens.

In the Part 4 we will explore the column model and also take a look at setting up a customer cell renderer for our date column.

Until then, Happy Coding....