From Sencha - Learn

For the past several months I have explored using the ExtJS library of components. After many false starts along the way, and long periods of trial and error, I've finally come to better understand the library and it's implementation. Now I want to share that with everyone, as simply as I can, so that you might not struggle as I have. This series will deal with creating your own DataGrid, and be broken up in a way so as to explain the various parts needed.

I will not go over setting up a server side paging query here, as that is not specific to the ExtJS library. For a reference, there is an example in ColdFusion posted on Cutter's Crossing. You will need to set up a server side paging query, in the language of your choice, to work with the tutorial.

The Data Store

So, up until now we have setup our support files and written our paging query service. Now it's time to begin trying our data to our DataGrid. The ExtJS library provides you many different ways of pulling in data into the components. We're going to create a data 'Store' using a combination of the HttpProxy (a utility for pulling data from within the same domain) and the XmlReader (for parsing our returned datasets).

A 'Store' is "a client side cache of Ext.data.Record objects which provide input data for widgets." Basically you create this representation of your server side data by defining where it is and what it looks like. We're using the HttpProxy, in this case, because our service script (pagingService.cfm) resides within the same domain as our calling page. And, since we set our service script to return an XML document, we need the XmlReader to 'map' the data that we need.

First we'll setup the basic block

var ds = new Ext.data.Store({
 
});

Add in the location of our service script

var ds = new Ext.data.Store({
	// load using HTTP
    proxy: new Ext.data.HttpProxy({url: 'http://cc.mytestserver.loc/jTesting/xmlSqlTest.cfm'}),
 
});

Then we set up our XML 'reader'

var ds = new Ext.data.Store({
     // load using HTTP
     proxy: new Ext.data.HttpProxy({url: 'http://cc.mytestserver.loc/jTesting/xmlSqlTest.cfm'}),
 
     // the return will be XML, so lets set up a reader
     reader: new Ext.data.XmlReader({
          // records will have an "T4" tag
          record: 'T4',
          id: 'ID',
          totalRecords: "recCount"
     }, [
          // set up the fields mapping into the xml doc
          'vcFirstName', 'vcLastName', 'bIsAdministrator','bIsActive','tsDateLastLogin'
     ]),
 
});

Ok, here is where I have to put on the brakes for a minute. You have to understand a little about what the reader requires here. It helps if you take a look at a return recordset from your service script. I suggest you call it in Firefox for a nice representation, but basically it looks something like this:

<userList>
	<T4>
		<recCount>5802</recCount>
		<ID>2350</ID>
		<vcFirstName>Robin</vcFirstName>
		<vcLastName>Williams</vcLastName>
		<bIsAdministrator>0</bIsAdministrator>
		<bIsActive>1</bIsActive>
		<tsDateLastLogin>2007-05-01T14:34:57</tsDateLastLogin>
	</T4>
	<T4>
		<recCount>5802</recCount>
		<ID>4027</ID>
		<vcFirstName>Howie</vcFirstName>
		<vcLastName>Mandel</vcLastName>
		<bIsAdministrator>0</bIsAdministrator>
		<bIsActive>1</bIsActive>
		<tsDateLastLogin>2007-04-29T16:29:33</tsDateLastLogin>
	</T4>
	...
</userList>

You see, looking at the XML, that each record is denoted by the 'T4' node, which we have mapped in our reader to the 'record' attribute. You'll also note that the 'id' attribute was mapped to the 'ID' node in the XML document. This is a unique identifier within each record. We mapped 'totalRecords' to the 'recCount' node, as this is where we set up in our script to place the total record count, and then you see a basic comma delimited list of the nodes that will be included in our DataGrid.

It's important to note here that we have used a very basic XML return for our example here. You do have the power to map values from XML attributes and nested nodes, through the use of XPath syntax. You can even rename a 'field' when identifying a mapping. Look through the examples included in the ExtJS download to get a better idea of what you might be able to do.

OK, to finish our DataStore definition we're going to specify the ability to 'remotely' sort our data, and set up our default sort column and sort order.

var ds = new Ext.data.Store({
     // load using HTTP
     proxy: new Ext.data.HttpProxy({url: 'http://cc.mytestserver.loc/jTesting/xmlSqlTest.cfm'}),
 
     // the return will be XML, so lets set up a reader
     reader: new Ext.data.XmlReader({
          // records will have an "T4" tag
          record: 'T4',
          id: 'ID',
          totalRecords: "recCount"
     }, [
          // set up the fields mapping into the xml doc
          'vcFirstName', 'vcLastName', 'bIsAdministrator','bIsActive','tsDateLastLogin'
     ]),
     // turn on remote sorting
     remoteSort: true
});
ds.setDefaultSort('vcLastName', 'desc');

And so begins our scripting for creating our DataGrid. The big "gotchas" that hit me along the way were the stupid things. Mis-identifying my 'record' mapping, or missing a trailing comma. Firebug and the JavaScript Console (Firefox) are your friends.

Next round we'll define our ColumnModel. This is how we'll define the order of initial column display, define column headings, and really button up the initial details before fine tuning our layout.

Source code for this part of the tutorial is available from Cutter's Crossing.

• Ext Programmer's API Documentation
• Ext User Forums

This page was last modified on 6 October 2010, at 23:38. This page has been accessed 37,937 times.