So, up until now we have setup our support files and written our paging query service. Now it's time to begin tying our data to our DataGrid. The Ext 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

view plain print about
1var ds = new Ext.data.Store({
2
3});

Add in the location of our service script

view plain print about
1var ds = new Ext.data.Store({
2    // load using HTTP
3 proxy: new Ext.data.HttpProxy({url: 'http://cc.mytestserver.loc/jTesting/xmlSqlTest.cfm'}),
4
5});

Then we set up our XML 'reader'

view plain print about
1var ds = new Ext.data.Store({
2    // load using HTTP
3 proxy: new Ext.data.HttpProxy({url: 'http://cc.mytestserver.loc/jTesting/xmlSqlTest.cfm'}),
4
5    // the return will be XML, so lets set up a reader
6 reader: new Ext.data.XmlReader({
7        // records will have an "T4" tag
8        record: 'T4',
9        id: 'ID',
10        totalRecords: "recCount"
11    }, [
12        // set up the fields mapping into the xml doc
13        'vcFirstName', 'vcLastName', 'bIsAdministrator','bIsActive','tsDateLastLogin'
14    ]),
15
16});

Ok, here is where I have to put on the breaks 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:

view plain print about
1<userList>
2    <T4>
3        <recCount>5802</recCount>
4        <ID>2350</ID>
5        <vcFirstName>Robin</vcFirstName>
6        <vcLastName>Williams</vcLastName>
7        <bIsAdministrator>0</bIsAdministrator>
8        <bIsActive>1</bIsActive>
9        <tsDateLastLogin>2007-05-01T14:34:57</tsDateLastLogin>
10    </T4>
11    <T4>
12        <recCount>5802</recCount>
13        <ID>4027</ID>
14        <vcFirstName>Howie</vcFirstName>
15        <vcLastName>Mandel</vcLastName>
16        <bIsAdministrator>0</bIsAdministrator>
17        <bIsActive>1</bIsActive>
18        <tsDateLastLogin>2007-04-29T16:29:33</tsDateLastLogin>
19    </T4>
20    ...
21</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.

view plain print about
1var ds = new Ext.data.Store({
2    // load using HTTP
3 proxy: new Ext.data.HttpProxy({url: 'http://cc.mytestserver.loc/jTesting/xmlSqlTest.cfm'}),
4
5    // the return will be XML, so lets set up a reader
6 reader: new Ext.data.XmlReader({
7        // records will have an "T4" tag
8        record: 'T4',
9        id: 'ID',
10        totalRecords: "recCount"
11    }, [
12        // set up the fields mapping into the xml doc
13        'vcFirstName', 'vcLastName', 'bIsAdministrator','bIsActive','tsDateLastLogin'
14    ]),
15    // turn on remote sorting
16    remoteSort: true
17});
18ds.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.

This entry was posted on May 4, 2007 at 9:11 PM and has received 66650 views. There are currently 20 comments. Print this entry. Download attachment.