CODEWITHSUNDEEP
extjsextjs4
meow
meow

Reputation: 45

Saving edited record in a cell editing grid

How can I save the edited record on click of the save button?

enter image description here

my code :

// create the Data Store
var store = Ext.create('Ext.data.Store', {
    //autoSync: true,
    autoLoad:true,
    autoDestroy: true,
    url: 'update_premise.php',
    model: 'Plant',
    proxy: {
        type: 'ajax',
        // load remote data using HTTP
        url: 'getLab.php',
        // specify a XmlReader (coincides with the XML format of the returned data)
        reader: {
            type: 'json'
        },
          writer: {
            type: 'json'

        }
    },
    sorters: [{
        property: 'lab_name',
        direction:'ASC'
    }]
});

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 1
});

// create the grid and specify what field you want
// to use for the editor at each header.
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [{
        id: 'lab_name',
        header: 'Common Name',
        dataIndex: 'lab_name',
        flex: 1,
        editor: {
            allowBlank: false
        }
    }],
    selModel: {
        selType: 'cellmodel'
    },
    renderTo: 'editor-grid',
    width: 600,
    height: 300,
    title: 'Lab?',
    frame: true,
    tbar: [
     {
         text: 'Save',
         handler: function ()
         {
               for (var i = 0; i <grid.store.data.items.length; i++) {
                 var record = grid.store.data.items [i];
                 if (record.dirty) {
                 }
             }
         }
     }
     ],
    plugins: [cellEditing]
});

Upvotes: 0

Views: 11307

Answers (2)

VDP
VDP

Reputation: 6420

You don't need to save via ajax calls sencha does all the checking and saving for you.

 for (var i = 0; i <grid.store.data.items.length; i++) {
        var record = grid.store.data.items [i];
        if (record.dirty) {
            ...
        }
 }

this part can be replaced by store.sync();

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.AbstractStore-method-sync

If you want to send the data to update to another url then to read you can configure your proxy with an api object in staid of a single url parameter.

proxy: {
    type: 'ajax',
    api: {
        read    : 'getLab.php',
        create  : 'setLab.php',
        update  : 'setLab.php',
        destroy : 'deleteLab.php'
    }
    reader: {
        type: 'json'
    },
    writer: {
        type: 'json'

    }
}

Upvotes: 2

Mark Twain
Mark Twain

Reputation: 836

Basically it depends on your server side. If you want to save by the ajax request, you should use something like this:

Ext.Ajax.request({
    url: '/Some/Save',
    method: 'POST',
    params: {
        'RecordId': record.get('Id'),
        'RecordValue': record.get('Value')
    }
})

You should use the code above inside your if statement:

if (record.dirty) {
    //Save code
}

Also you could combine all rows in one big object and use it in the request.

As for the cell editor plugin, it was designed to save records automatically. You should use the validateedit event. The documentation is here: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.plugin.CellEditing-event-validateedit

Upvotes: 0

Related Questions