How To Save data in Grid [with Row Editing Plugin]

[AtulDawkhare]

Hi,
I have a Grid which display data from the store. Now I want to edit the data and send it to Server to store into database.
I have wrote code on Grid Edit event

grid.on('edit', function( e)         {
            alert('You are Editing'+e.record)
            
            
             e.record.commit();
            
        });

But still I think the page is not getting submitted on server side.
At the time of loading the page extjs calls "PagingData.jsp" and load data, but when I clicked on the Update button, nothing happens. Please guide me if anything is wrong here.

Can you please tell me what is missing here? Also Can you please tell me the flow how it works in the background?

Here is the code
Store

var store = Ext.create('Ext.data.Store', {
        pageSize: 10,
        model: 'ForumThread',
        remoteSort: true,
        proxy: {
            // load using script tags for cross domain, if the data in on the same domain as
            // this page, an HttpProxy would be better
            autoSave: true,
            type: 'jsonp',
            url: 'PagingData.jsp?',
            reader: {
                root: 'topics',
                totalProperty: 'totalCount'
            },
             writer: writer,
            // sends single sort as multi parameter
            simpleSortMode: true
        },
        sorters: [{
            property: 'Updated_date',
            direction: 'DESC'
        }]
    });

Grid

var grid = Ext.create('Ext.grid.Panel', {
        width: 700,
        errorSummary:false, 
        height: 500,
        title: 'Project Listing Grid',
        store: store,
        disableSelection: true,
        loadMask: true,
        viewConfig: {
            id: 'gv',
            trackOver: false,
            stripeRows: false,
            plugins: [{
                ptype: 'preview',
                bodyField: 'excerpt',
                expanded: true,
                pluginId: 'preview'
            }]
        },
        // grid columns
        columns:[{
            // id assigned so we can apply custom css (e.g. .x-grid-cell-topic b { color:#333 })
            // TODO: This poses an issue in subclasses of Grid now because Headers are now Components
            // therefore the id will be registered in the ComponentManager and conflict. Need a way to
            // add additional CSS classes to the rendered cells.
            id: 'topic',
            flex:1,
            text: "Project Title",
            dataIndex: 'title',
            sortable: true,
            editor: {
                // defaults to textfield if no xtype is supplied
                allowBlank: false
            }
        }, {
            text: "Created on",
            dataIndex: 'Created_date',
            width: 220,
            align: 'right',
            renderer: rendercreatedon,
            sortable: true,
             field: {
                xtype: 'datefield',
                allowBlank: false,
                format: 'm/d/Y',
                minValue: '01/01/2006',
                minText: 'Cannot have a start date before the company existed!',
                maxValue: Ext.Date.format(new Date(), 'm/d/Y')
            }
        },{
            id: 'last',
            text: "Updated on ",
            dataIndex: 'Updated_date',
            width: 220,
            renderer: renderupdatedon,
            sortable: true,
             field: {
                xtype: 'datefield',
                allowBlank: false,
                format: 'm/d/Y',
                minValue: '01/01/2006',
                minText: 'Cannot have a start date before the company existed!',
                maxValue: Ext.Date.format(new Date(), 'm/d/Y')
            }
        }],
        plugins: [rowEditing],
        // paging bar on the bottom
        bbar: Ext.create('Ext.PagingToolbar', {
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
            items:[
                '-', {
                text: 'Show Preview',
                pressed: pluginExpanded,
                enableToggle: true,
                toggleHandler: function(btn, pressed) {
                    var preview = Ext.getCmp('gv').getPlugin('preview');
                    preview.toggleExpanded(pressed);
                }
            }]
        }),
        renderTo: 'topic-grid'
    });

[arthurakay]

record.commit() doesn't automatically tell the data store to send it's data to the server. It only makes a local change to the model being edited.

I think you're looking for the sync() method on the data store:
- http://docs.sencha.com/ext-js/4-0/#!...re-method-sync

[AtulDawkhare]

Thanks for the reply.
But I have written writer for the store, So ideally it should submit the request.
May be I am wrong here. Please guide me.

Also , for now I have done something on edit event.

    grid.on('edit', function( e) 
        {
               Ext.Ajax.request({
                    url: '/GridDemo',
                    method: 'POST',
                    params: 'update=true&id='+e.record.get('id')+'&title='+e.record.get('title')+'&update_date='+Ext.Date.format(e.record.get('Updated_date'), 'Y-m-d')+'&created_date='+Ext.Date.format(e.record.get('Created_date'), 'Y-m-d'),
                    success: function(obj) {
                    var resp = obj.responseText;
                        if (resp != 0) {
                            Ext.MessageBox.alert('Success',' Processed');
                        } else {
                        Ext.MessageBox.alert('Failed', 'No Processed');
                        }
                    }
                   });
          
        });

Now through this I am able to submit my request to server.

So want to know , It is the correct way to submit the request to server? Please guide me on this.

[bee]

in store define autosync : true in config.

I observered u used autosave not sure it works in extjs4 I hope this helps.

[arthurakay]

You certainly can submit a request in the "edit" event as you have posted... but I still don't understand why you don't have the data store do the work for you (via the sync() method).

It doesn't matter if you've defined a writer for your store or not...

[AtulDawkhare]

Hey Thanks for this.It really works for me.Now as you suggested ,I have modified the code

   grid.on('edit', function(editor, e) 
        {
            alert(editor.store)
            editor.store.sync();
   }

And The store is

 var store = Ext.create('Ext.data.Store', {
        pageSize: 10,
        model: 'ForumThread',
        remoteSort: true,
        proxy: {
            autoSave: true,
            autoSync:true,
            type: 'ajax',
            api: {
                create  : '/GridDemo',
                read    : '/GridDemo',
                update  : '/GridDemo?update=true',
                destroy : '/GridDemo'
                },
            reader: {
                root: 'topics',
                totalProperty: 'totalCount'
            },
            simpleSortMode: true
        },
        sorters: [{
            property: 'Updated_date',
            direction: 'DESC'
        }]
    });

Now The request is getting send on the another page, after clicking on Update button of the Row-editor Plug in.
One problem i am facing that, on the forwarded page I am not getting all the values, of the edited row.
Please suggest Do I need to send the each value of the record? in Query String
something like

/GridDemo?id=xyz&title=xyz

Please guide me.