Updating a field in a record dyanamically in extjs

Question

Scenario

I want to update the column data of particular record in grid having store with static data. Here is my store:

extend : 'Ext.data.Store',
model  : 'MyModel',
autoLoad:true,
proxy: {
    type: 'ajax',
    url: 'app/data/data.json',
    reader: {
        type: 'json',
        root: 'users'
    }
},

My data.json

 {
     'users': [{
         QMgrStatus: "active",
         QMgrName: 'R01QN00_LQYV',
         ChannelStatus: 'active',
         ChannelName: 'LQYV.L.CLNT',
         MxConn: 50
     }]
 }

What I am doing to update the record :

var grid = Ext.getCmp('MyGrid');
var store = Ext.getStore('Mystore');
store.each(function(record, idx) {
    val = record.get('ChannelName');
    if (val == "LQYV.L.CLNT") {
        record.set('ChannelStatus', 'inactive');

        record.commit();
    }
});
console.log(store);
grid.getView().refresh();

MY PROBLEM

I am getting the record updated over here.It is not getting reflected in my grid panel.The grid is using the same old store(static).Is the problem of static data? Or am I missing something or going somewhere wrong? Please help me out with this issue.Thanks a lot.

MY EDIT

I am tryng to color code the column based on the status.But here I am always getting the status="active" even though I am updating the store.

What I am trying to do in my grid

{
    xtype: 'grid',
    itemId: 'InterfaceQueueGrid',
    id: 'MyGrid',
    store: 'Mytore',
    height: 216,
    width: 600,
    columns: [{
        text: 'QueueMgr Status',
        dataIndex: 'QMgrStatus',
        width: 80
    }, {
        text: 'Queue Manager \n Name',
        dataIndex: 'QMgrName',
        width: 138
    }, {
        text: 'Channel Status',
        dataIndex: 'ChannelStatus',
        width: 78,
        align: 'center',
        renderer: function(value, meta, record) {
            var val = record.get('ChannelStatus');
            console.log(val); // Here I am always getting status="active". 
            if (val == 'inactive') {
                return '<img src="redIcon.png"/>';
            } else if (val == 'active') {
                return '<img src="greenIcon.png"/>';
            }
        }
    }, {
        text: 'Channel Name',
        align: 'center',
        dataIndex: 'ChannelName',
        width: 80
    } {
        text: 'Max Connections',
        align: 'center',
        dataIndex: 'MxConn',
        width: 80
    }]
}

Answer 1

A drastic way is to reconfigure your grid. This may not end up to be your final solution, but maybe you get to know what is going wrong.

Call

grid.reconfigure(store) 

instead of

grid.getView().refresh();

after changing the records. You can also use a single store.commitChanges() instead of using a record.commit() on each single record.