commit changes on existing records in extjs store

Question

my issue is that I want to update existing store and show the changes on the grid. What I'm doing to update is :

var record = store.getById(me.internalParameters.editInfo.id);
//console.log(me.InfoEditorPanel.hardwareIdField.value);
record.set('hardwareid', me.InfoEditorPanel.hardwareIdField.value);
record.set('location', me.InfoEditorPanel.locationField.value);
record.set('isActive', me.InfoEditorPanel.isActiveField.value);
record.commit();
store.load();

Here what I use to build the grid.

Utils.getPanelListGrid = function (parameters) {
    if (parameters.initParameters == null)
        parameters.initParameters = {};
    var initParameters = parameters.initParameters;
    initParameters.gridColumns = [
        { header: "ID", dataIndex: "id", flex: 1 },
        { header: "Hardware ID", dataIndex: "hardwareid", flex: 1 },
        { header: "Location", dataIndex: "location", flex: 1 },
        { header: "Active", dataIndex: "isActive", flex: 1 }
    ];
    return new Backend.shared.MyDataGrid(parameters);
};

Ext.define(
    "shared.MyDataGrid", {

        extend: "Ext.grid.Panel",
        xtype: "MyDataGrid",
        title: "MyDataGrid - Hardcoded values",
        initParameters: {
            storeIdProperty: null,
        },
        initComponent: function () {
            this.store = Ext.create('Ext.data.Store', {
                storeId: 'myStore',
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        root: 'items'
                    }
                },
                fields: ['id', 'hardwareid', 'location', 'isActive'],
                data: {
                    'items': [{
                        'id': '123456',
                        'hardwareid': "HID-159",
                        'location': "Bedroom",
                        'isActive': "No"
                    }, {
                        'id': '789456',
                        'hardwareid': "HID-357",
                        'location': "Kitchen",
                        'isActive': "Yes"
                    }, {
                        'id': '147852',
                        'hardwareid': "HID-149",
                        'location': "Guest-room",
                        'isActive': "Yes"
                    }
                    ]
                }
            });

            this.columns = this.initParameters.gridColumns;

            this.listeners = {
                selectionchange: {
                    scope: this,
                    fn: function (selectionModel, selectedRecords, eventOptions) {
                        this.selectedIds = [];
                        this.selectedItems = [];

                        if (selectedRecords != null) {
                            for (var i = 0; i < selectedRecords.length; i++) {
                                var item = selectedRecords[i].data;
                                this.selectedIds.push(item[this.initParameters.storeIdProperty]);
                                this.selectedItems.push(item)
                            }
                        }
                        if (this.initParameters.selectionChangeCallback != null)
                            this.initParameters.selectionChangeCallback(this.selectedIds, this.selectedItems);
                    }
                }
            };

            shared.MyDataGrid.superclass.initComponent.call(this);
        },
        getRecordCount: function () {
            return this.getStore().getTotalCount();
        },
        getSelectedIds: function () {
            return this.selectedIds;
        },
        getSelectedItems: function () {
            return this.selectedItems;
        }
    });

Can anyone please explain what should I do exactly to make the grid show the updated row?

Answer 1

I suggest that use the following code in your 'selectionchange' event.

this.getStore().load({
    params:{
        'yourModelIdProperty':'selectedId'
    }
});

It's call an store proxy. You should write a function for that proxy and load the updated data.