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
    }]
}

Karie

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.

Nussbaum

Thanks Christoph. I resolved it using grid.bindStore(MyUpdatedStore); But your solution also rocks.Thanks a lot – Karie

Used grid.reconfigure(store) - worked like a charm! Thanks! – Hepsibah

Answer 2

Maybe it is just a typo, you assign val in your condition. Try this (= to ==):

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','active');
      }
      else {
         record.set('ChannelStatus','inactive');
      }
      record.commit();
});
console.log(store);
grid.getView().refresh();

Nussbaum

Thanks.But still I am getting the status as inactive.I am still getting the val as inactive in my grid's column renderer.It is taking the old store values.Thanks again. – Karie

Answer 3

Have you tried commiting your store and reloading it ?

Try this way.

yourstorename.commitChanges();
yourstorename.reload(); 

Tame

Thnks Shankar.Please look into my edit.I am not getting values of the store reflected in my grid. – Karie

Answer 4

I resolved it using

grid.bindStore(myupdatedstore);

As stated by @Christoph

grid.reconfigure(store) 

works fine as well .

Karie