Search code examples
extjsextjs6-classicextjs6.2

How to send only one row to DB after grid edit extjs 6.2.0


How to send only one row to DB after grid edit extjs 6.2.0 ?

After i edited one cell in a row, scipt sends to server all rows than i edit before. But id like to send to server only one one row where i edited a cell. How to do that? He is a json to server

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

Ext.util.Format.timefieldRenderer = function(format) {
    return function(v) {
        if (v instanceof Date) {
            return v.format(format);
        } else {
            return v;
        }
    };
};


// Создаем model
Ext.define('Users', {
    extend: 'Ext.data.Model',
    fields: [{
            name: 'id',
            type: 'int'
        },
        {
            name: 'time',
            type: 'date',
            //dateFormat: 'H:i'
        },

    ]
});

var occupationStore = Ext.create('Ext.data.Store', {
    fields: ['time'],
    data: [{
            time: 'CEO'
        },
        {
            time: 'Vicepresident'
        },
        {
            time: 'Marketing manager'
        },
    ]
});


Ext.onReady(function() {
    // Создаем store
    var store = Ext.create('Ext.data.Store', {
            autoLoad: true,
            autoSync: true,
            model: 'Users',
            proxy: {
                type: 'ajax',
                url: 'server.php',
                api: {
                    read: 'server.php?action=read',
                    update: 'server.php?action=update'
                },
                reader: {
                    type: 'json',
                    rootProperty: 'data'
                },
                writer: {
                    type: 'json',
                    encode: true,
                    rootProperty: 'dataUpdate',
                    allowSingle: false,
                    writeAllFields: true,
                    //root:'records'
                },
                actionMethods: {
                    read: 'GET',
                    update: 'GET'

                }
            },
        }


    );

    var grid = Ext.create('Ext.grid.Panel', {
        renderTo: document.body,
        //plugins: [rowEditing],
        // Редактирование
        plugins: {
            ptype: 'cellediting',
            clicksToEdit: 1
        },
        width: 1000,
        height: 330,
        frame: true,
        title: 'Users',
        store: store,
        iconCls: 'icon-user',
        columns: [{
                text: 'id',
                width: 50,
                sortable: true,
                dataIndex: 'id',
                renderer: function(v, meta, rec) {
                    return rec.phantom ? '' : v;
                }
            },
            {
                header: 'time',
                width: 120,
                // sortable: true,
                dataIndex: 'time_start',
                //format: 'H:i',
                // Нужно для верного отображеия времени после редактирования в таблице
                renderer: Ext.util.Format.dateRenderer('H:i'),
                editor: {
                    completeOnEnter: false,

                    field: {
                        xtype: 'timefield',
                        format: 'H:i',
                        //name: 'timeStart1',
                        //fieldLabel: 'Time In',
                        minValue: '8:00',
                        maxValue: '20:00',
                        increment: 30,
                        anchor: '100%',
                        allowBlank: false
                    }
                }
            },

        ],
    });
});

Solution

  • What you may simply need is a proper reply from the server. If the server (PHP) returns

    {"success":true}
    

    on every successful call to update, the submitted record is marked as successfully synchronized ("not dirty") and will no longer be submitted to the server unless it is changed again.

    Please note that this will not prevent the store from sending multiple records if multiple records change at once in the frontend, but it will prevent sending redundant information (already saved records) to the server over and over again.

    You can see this in action in a fiddle:

    https://fiddle.sencha.com/#view/editor&fiddle/21t6

    Note that "the server" in my fiddle takes a few hundred milliseconds to answer, and the red ears on the changed grid columns will go away once the record is no longer dirty.