Sending entire grid of data as JSON

[acarapetis]

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]

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]

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]

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]

What could be better? You are serializing Records.

[Stargazers]

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]

Thank you Acarapetis, I found your solution very useful.

[devnull]

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]

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]

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!