1. #1
    Sencha User
    Join Date
    Jun 2008
    Location
    Melbourne, Australia
    Posts
    18
    Vote Rating
    0
    acarapetis is on a distinguished road

      0  

    Default Sending entire grid of data as JSON

    Sending entire grid of data as JSON


    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).

    Code:
    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.

  2. #2
    Ext User
    Join Date
    Jun 2008
    Posts
    121
    Vote Rating
    0
    Stargazers is on a distinguished road

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Jun 2008
    Location
    Melbourne, Australia
    Posts
    18
    Vote Rating
    0
    acarapetis is on a distinguished road

      0  

    Default


    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:

    Code:
                    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.

  4. #4
    Ext User
    Join Date
    Jun 2008
    Posts
    121
    Vote Rating
    0
    Stargazers is on a distinguished road

      0  

    Default


    Quote Originally Posted by acarapetis View Post
    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

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    What could be better? You are serializing Records.

  6. #6
    Ext User
    Join Date
    Jun 2008
    Posts
    121
    Vote Rating
    0
    Stargazers is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    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.

  7. #7
    Ext User
    Join Date
    Jul 2008
    Posts
    1
    Vote Rating
    0
    Stefaans is on a distinguished road

      0  

    Default


    Thank you Acarapetis, I found your solution very useful.

  8. #8
    Ext User
    Join Date
    Jul 2007
    Posts
    3,128
    Vote Rating
    1
    devnull is an unknown quantity at this point

      0  

    Default


    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

  9. #9
    Ext User kckc1234's Avatar
    Join Date
    Mar 2008
    Posts
    39
    Vote Rating
    0
    kckc1234 is on a distinguished road

      0  

    Default how to send entire data in grid as an array for each column in the grid

    how to send entire data in grid as an array for each column in the grid


    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 ?

  10. #10
    Sencha Premium Member
    Join Date
    Dec 2011
    Posts
    236
    Vote Rating
    3
    ypandey is on a distinguished road

      0  

    Default store.writeRecords(records) that can return data string in json/xml?

    store.writeRecords(records) that can return data string in json/xml?


    Quote Originally Posted by Animal View Post
    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!