PDA

View Full Version : Sending entire grid of data as JSON



acarapetis
29 Jun 2008, 8:52 PM
Hey all,
ExtJS is proving very useful and powerful so far, but I've hit a hitch.

I have a page with an EditorGridPanel connected to a Store, which is populated by JSON generated by a CGI Ajax call, implemented using Ext.data.JsonReader. That much works perfectly, and the contents of a database table are displayed in the grid, and can be edited.

The problem comes with updating the database with changes: as records can be added, modified or deleted on this page, and the amount of data being handled is relatively small, I want to implement the database update as a single AJAX call (?) that sends the entire contents of the grid/store in a POST request, triggered by a save button.

I've had a good look at the API docos for the [Editor]GridPanel and Store classes, and haven't found a way to extract the data in the Store as an array structure or JSON: am I missing something, or is this simply not the right approach?

Here's the code, cut down as much as possible to retain functionality (except the save button).



var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'edit',
width: 620,
height: 300,
title: panel_title,
selModel: new Ext.grid.RowSelectionModel(),
frame: true,
clicksToEdit: 1,

tbar: [{
text: 'Add',
handler : function(){
var p = new simple_record({
title: '',
description: '',
user_id: '',
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
},
iconCls: 'add',
tooltip: 'Click to add a new record'
}, '-', {
text: 'Delete',
handler : function(){
grid.stopEditing();
store.remove(grid.getSelectionModel().getSelected());
grid.startEditing(0, 0);
},
iconCls: 'remove',
tooltip: 'Click to delete the selected record'
}],

buttons: [{
text: 'Save',
id: 'submit',
handler: function(){
// Send data now
store.commitChanges();
var conn = new Ext.data.Connection();
conn.extraParams = {
task: 'update',
table: simple_table,
data: ??// JSON here
}
conn.request({
url:'cgi-bin/simple_edit.cgi',
method:'POST',
});
}
}]
});


Thanks for any replies.

Stargazers
29 Jun 2008, 9:05 PM
Well, can you read all of lines in for-loop and save to array, and then send that array as JSON? We have done it so...

Data store can be also read fully by setting yourdatastore.getRange(0) which reads the whole grid, if I'm not understood wrong.

acarapetis
29 Jun 2008, 9:36 PM
I thought there might have been an easier way, but thanks for the tip... I've used store.getRange() to return the records and I've successfully created the string I need by looping through them:


var data = new Array();
var records = store.getRange();
for (var i = 0; i < records.length; i++) {
data.push(records[i].data);
}
// Ext.util.JSON.encode(data) gives me what I want now


If anyone knows a slicker way, please tell me: otherwise, this'll do. :)

Stargazers
29 Jun 2008, 9:40 PM
If anyone knows a slicker way, please tell me: otherwise, this'll do. :)

Well, if somebody knows that, I am interested too. We have done it also using that kind of method, because we didn't found any better then. But it is good if somebody knows better way and tells it to us :)

Animal
29 Jun 2008, 11:05 PM
What could be better? You are serializing Records.

Stargazers
29 Jun 2008, 11:07 PM
What could be better? You are serializing Records.

Well, that was just a guess. Maybe there is some function what does this automatically or similar, but if not, well, then it is fine to do as it is done.

Stefaans
12 Jul 2008, 4:08 PM
Thank you Acarapetis, I found your solution very useful.

devnull
14 Jul 2008, 8:12 AM
since you indicate that you are really only interested in new or changed records, I would offer the suggestion of only sending those records. the store tracks all of this for you, so you just have to call its getModifiedRecords() method :)

kckc1234
28 Jul 2008, 4:26 AM
Hi

I have a requirement where in i have to send the entire data that is present in my grid to a particular service.

Now my requirement is that the service accepts data in the form of arrays for each column in the grid.

what ever is the data that is entered for each column in grid has to be sent to the service delimited by comma. i tried using collect property of the store by passing the dataindex. How ever it is retreiving back only unique values. i want the duplicate values as well to be fetched using this function. How do i pass the value to the service ?

ypandey
6 Mar 2014, 5:57 AM
What could be better? You are serializing Records.
We have also been using same approach but since it doesn't use writer.It won't take care of field's persist flag and other proxy configs like writeAllFields, expandData, allowSingle etc.Shouldn't there be a store's method to return json/xml data using writer without making any request to server?

Like store.loadData(data) uses reader without making request!8-|