Set the edited row in EXTJS grid after editing without refreshing page

Question

I am editing a row in EXTJS grid on clicking the edit action link. On clicking the edit link of a row a new window opens with all the data of the row and "Save" and "Cancel" button.

On clicking the "Save" button, it is saving the record in database. But I want the row should also get refreshed without refreshing the page.

I am new to EXTJS.

Can any one help me to do the same.

Here is my code.

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.grid.plugin.BufferedRenderer'
]);

Ext.define('TestResult', {
    extend: 'Ext.data.Model',
    fields: [
        {
            name: 'ID',
            type: 'int'
        },
        {
            name: 'jobNo',
            type: 'int'
        },
        {
            name: 'stageCode',
            type: 'String'
        },
        {
            name: 'productTitle',
            type: 'String'
        },
        {
            name: 'brand',
            type: 'String'
        },
        {
            name: 'category',
            type: 'String'
        },
        {
            name: 'ftpDate',
            type: 'Date'
        }],
    idField: 'ID'
});

Ext.onReady(function() {
    var store = Ext.create('Ext.data.Store', {
        model: 'TestResult',
        autoLoad: true,
        autoSync: true,
        proxy: {
            type: 'ajax',
            url : 'data.jsp',
            reader :
            {
                type : 'json'
            },
            writer :
            {
                type : 'json'
            }
        }
    });

    var grid = Ext.create('Ext.grid.Panel', {
        width: 700,
        height: 500,
        title: 'Buffered Grid of records',
        store: store,
        loadMask: true,
        plugins: 'bufferedrenderer',
        selModel: {
            pruneRemoved: false
        },
        viewConfig: {
            trackOver: false
        },
        features: [{
            ftype: 'groupingsummary',
            groupHeaderTpl: 'Department: {name}',
            showSummaryRow: false
        }],
        // grid columns
        columns:[{
            text: 'ID',
            sortable: true,
            dataIndex: 'ID',
            groupable: false,
            locked: true,
            width: 70
        }, {
            text: 'Job No.',
            sortable: true,
            dataIndex: 'jobNo',
            groupable: false,
            locked: true,
            width: 120
        }, {
            text: 'Version',
            dataIndex: 'stageCode',
            groupable: false
        }, {
            text: 'Product Title',
            dataIndex: 'productTitle',
            groupable: false
        }, {
            text: 'Brand',
            dataIndex: 'brand',
            groupable: false
        }, {
            text: 'Category',
            dataIndex: 'category',
            width: 200,
            groupable: false
        }, {
            text: 'FTP Date',
            dataIndex: 'ftpDate',
            xtype: 'datecolumn',
            groupable: false
        },
        {
            xtype:'actioncolumn',
            header:'Edit',
            width:50,
            items: [{
                icon: 'assets/images/edit.png',  // Use a URL in the icon config
                tooltip: 'Edit',
                handler: function(grid, rowIndex, colIndex) {
                    var rec = grid.getStore().getAt(rowIndex);
                    editForm.show();
                    editForm.down('form').loadRecord(rec);]
        }],
        renderTo: Ext.getBody()
    });

    var editForm = new Ext.Window({
        title: 'Edit Window',
       items:[
          { 
            xtype: 'form',
            url: 'UpdateController',
            items: [
                {
                    xtype: 'hidden',
                    fieldLabel: 'ID',
                    name: 'ID',
                    allowBlank: false,
                    readOnly: true
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Job No.',
                    name: 'jobNo',
                    allowBlank: false,
                    readOnly: true
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Version',
                    name: 'stageCode',
                    allowBlank: false,
                    readOnly: true
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Product Title',
                    name: 'productTitle',
                    allowBlank: false
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Category',
                    name: 'category',
                    allowBlank: false
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Brand',
                    name: 'brand',
                    allowBlank: false
                },
                {
                    xtype: 'datefield',
                    fieldLabel: 'FTP Date',
                    name: 'ftpDate',
                    allowBlank: false
                }],
                 buttons : [{
                    text : 'Save',
                    handler: function()
                    {
                        this.up('form').getForm().submit(
                        {
                            success: function(f,a)
                            {
                                store.save();
                                var win = Ext.WindowManager.getActive();
                                if (win)
                                {
                                    win.hide();
                                }
                            },
                            failure: function(f,a)
                            {
                                //Ext.Msg.alert('Warning', 'Error');
                                Ext.Msg.alert('Warning', a.result.errormsg);
                                this.up('window').hide();
                            }
                        });
                    }
                },
                {
                    text: 'Cancel',
                    handler: function()
                    {
                        this.up('window').hide();
                    }
                }]
            }

       ]
    });
});

Thanks

Akatum Akatum · Accepted Answer · 2013-12-22T14:08:08

In your this.up('form').getForm().submit success handler you can update record, which you loaded into form, by using Ext.form.Basic updateRecord method.

So just add into success handler code:

// update record with form data
f.updateRecord();

// mark record as synchronized with server (because you already sent data to server with form submit method)
f.getRecord().commit();

Set the edited row in EXTJS grid after editing without refreshing page

1 Answers