My First ExtJS DataGrid Pt 4: 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 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
});
Add in the location of our service script
// load using HTTP proxy: new Ext.data.HttpProxy({url: 'http://cc.mytestserver.loc/jTesting/xmlSqlTest.cfm'}),
});
Then we set up our XML 'reader'
// 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 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:
<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.
// 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.


I would love a basic example getting data from a query to xml to a datagrid in coldfusion. Extjs looks great but no help with coldfusion.
<cfquery datasource="test" name="userslist">
select firstname,lastname,title,email
from tblaccountsdata
order by lastname
</cfquery>
<cfxml variable="mydoc">
<user>
<cfoutput query="userlist">
<name>
<first>#firstname#</first>
<last>#lastname#</last>
<title>#title#</title>
<email>#email#</email>
</name>
</cfoutput>
</user>
</cfxml>
<cfoutput>#mydoc#</cfoutput>
How do i get this into a datagrid...New to CF please bear with me :)
Are you intending to refresh this for CF8?
And do you have an example of this file that you feference:
xmlSqlTest.cfm
Thank you,
Noel
I will have some new tutorials coming soon, some dealing with the new CF8 Ajax Data features.
I want to display the tag value..
Thanks
i am a chinese!Thanks a lot!