Using Ext JS 2.2 Ajax in CF - Part 3 - Adding new rows to the grid.
To put this post in context I have included a picture of my final grid control at the top of the page.
When I began trying to use the Ext Grid Control to edit records, one of the first problems I had to solve was how to add additional rows. I asked the question on the ColdExt forum but got no answer.
Luckilly there were lots of people who had solved the problem on the Ext JS forums before me. It took me a while to translate the Ext JS solutions into one based on ColdExt, but here is what I came up with.
Several of the Ext JS widgets make use of the Ext.Data.Store this is a general purpose way to store data on the client and can keep trach of changes in the background leaving the control to get on with the display and presentation of the data. The Store also provides ways to transfer the data to and from the server.
One particular version of the store is JsonStore which provides a way to read and populate the store from Json data which is easy to create with ColdFusion. In the ColdExt examples Justin Carter has used a Json library by Jehiah Czebotar and Thomas Messier to create the Json which is used to load the store. In his notes Justin says this is "for compatibility". I know CF8 will create Json directly so I am not sure where the compatibility issue lies. It could be done to allow CF7 users to make use of the ColdExt tags or it could be because of some difference between the way CF8 creates Json and what is needed by the Ext Js widgets. Maybe someone who knows will comment.
So the first set in using the Grid as an editor is to create a suitable data store. Here is my code for that:
root="query.data" totalProperty="totalcount" url="/model/mProperty/ObjectTypeGetJson.cfm">
<ext:field name="objecttypeid" />
<ext:field name="groupid" />
<ext:field name="visibilityid" />
<ext:field name="managementid" />
<ext:field name="title" />
<ext:field name="description" />
<ext:field name="allowmultiple" />
<ext:field name="groupmayown" />
<ext:field name="membermayown" />
<ext:field name="membermayedit" />
<ext:param name="limit" value="#attributes._Maxrows#" />
<ext:param name="deleted" value="" />
<ext:param name="selectedRow" value="" />
</ext:jsonStore>
The url parameter on the JsonStore tag links to my ColdFusion template that creates the Json data.
I have created fields for each of the columns I display in the grid and I also created a couple of extra param tags which I use to keep track of which row is selcted and a list of the rows which have been deleted.
The limit param is used to drive the paging toolbar which allows the user to page through a large dataset a few rows at a time without having to download all the rows to the client.
So our goal is to create a new record and display it in the grid, where the user can update it with their own data. In order to do that all that is needed is to add the new record to the store. Ext JS will take care of the rest.
To add a new record we need to first create a record template:
var ObjectType = Ext.data.Record.create([
{name: 'objecttypeid', type: 'number'},
{name: 'groupid', type: 'number'},
{name: 'visibilityid', type: 'number'},
{name: 'managementid', type: 'number'},
{name: 'title', type: 'string'},
{name: 'description', type: 'string'},
{name: 'allowmultiple', type: 'bool'},
{name: 'groupmayown', type: 'bool'},
{name: 'membermayown', type: 'bool'},
{name: 'membermayedit', type: 'bool'}
]);
When we have a tempate for a record we can create one:
var newRec = new ObjectType({
objecttypeid: 0,
groupid: #attributes.grou_select#,
visibilityid: 5,
managementid: 5,
title: '',
description: '',
allowmultiple: true,
groupmayown: false,
membermayown: true,
membermayedit: true
});
Finally we add the record to the store:
myGrid.stopEditing();
myGrid.getStore().insert(0, newRec);
myGrid.startEditing(0, 0);
In order to use the above code in a coldExt control we simply have to specify it as the handler for the button on the toolbar. We wrap the handler code in a pair of handler tags.
Well I hope that is some use to someone. Please let me know if it helps you.
Thanks a lot for sharing.
Steve Cutter Blades has released an Ext JS extension called CFQueryReader which adds support for CF8's query -> JSON format which I'm in the process of integrating into ColdExt for those who want to use CF8's native JSON support, but for CFMX7 and perhaps other CFML engines I think it's still easier to use CFJSON.