[SOLVED] Grid with Cell Editing: Save All Changes

[rkanemeier]

I am having a hangup as to how to handle making ajax calls for each record in a grid that is changed.

So I have a grid with 4 editable columns. The grid has an "edit" listener. The listener pushes a record to an array every time a cell is edited. There is a save button that allows the user to save their changes (commit to the database). However, since I have 4 editable columns per row, I need to only retain 1 record in my array per row in the grid. Right now, I am pushing 4 records into the array when I've only edited 1 row in the grid.

So my first reaction was to ask, "how do I query the array to see if the record already exists?" If it does exist, I just want to update the changed contents of that record in the array. My record will contain 4 key values as well. Those 4 key values would denote the unique record.

Am I way off base on how to handle cell editing?

[rkanemeier]

I don't know if this is the best way to do this, but here is what I did.

I have a save button set up in the tool bar above the grid. I coded a handler on the button to loop through the records in the store. If the record is dirty, i execute a saveRecords function and pass the record into that function. The saveRecords function makes an ajax call using the data from the record as "parms".

Here is the code from the save button that loops through the grid store for dirty records:

            items: [{
        	    text: 'Save',
			    disabled: true,
			    iconCls: 'save',
			    handler: function(btn) {
    				btn.disable();
                    
                    for (var i = 0; i < myGrid.store.data.items.length; i++) {
                        var record = myGrid.store.data.items[i];
                        if (record.dirty) {
                            saveRecords(record);
                        }
                    }
                    

                    myDataStore.load();
			    }

The ajax request is just the standard ajax singleton call you see in many Valence example apps. I just pass record into the saveRecords function, and use record.get('FIELDNAME') to load the params.

[Johnny Major]

Ray,

That looks good. Instead of looping through the whole store you could just get the dirty records.

If your using ExtJs 4

        var changedRecs = myGrid.store.getUpdatedRecords();
        for (var i=0; i<changedRecs.length; i++) {
            saveRecords(changedRecs[i]);
        }

If your using ExtJs 3

        var changedRecs = myGrid.store.getModifiedRecords();
        for (var i=0; i<changedRecs.length; i++) {
            saveRecords(changedRecs[i]);
        }

[rkanemeier]

Johnny,

That looked more elegant, however, does not seem to work for me. getUpdatedRecords does not return anything at all, even though my grid has the red tick mark in the cell. We are using extjs 4.0.7.

[Johnny Major]

Ray,

Thats strange... Just tested this in 4.0.7 in Chromes dev console and getting one record back in the changedRecordsArray.

       var data,
            store,
            rec,
            changedRecordsArray;

        data = {
            users : [
                {
                    id          : 1,
                    name        : 'Tim Jones',
                    phoneNumber : '555 1234'
                },
                {
                    id          : 2,
                    name        : 'Elvis',
                    phoneNumber : '666 1234'
                },
                {
                    id          : 3,
                    name        : 'Abbey Welker',
                    phoneNumber : '888 1234'
                }
            ]
        };
        store = Ext.create('Ext.data.Store', {
            autoLoad : true,
            fields   : [
                {name : 'id',    type : 'int'},
                {name : 'name',  type : 'string'},
                {name : 'phone', type : 'string'}
            ],
            data     : data,
            proxy    : {
                type   : 'memory',
                reader : {
                    type : 'json',
                    root : 'users'
                }
            }
        });

        rec = store.getAt(1);

        rec.set('name', 'Elvis Presley');

        changedRecordsArray = store.getUpdatedRecords();

[ktoole]

I have used:

Ext.encode(Ext.pluck(grid.store.getModifiedRecords(), 'data'))

. This gets the changed records ( not deleted) in the store, picks out just the data from the store, and puts it in JSON format for the RPG program. I use vvIn_JSON on the RPG side to get in all the records at once.