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

score 10 · Answer 1 · answered Jun 29 '13 at 04:45

10

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.

answered Jun 29 '13 at 04:45

Christoph

1,013
11
23

1

Thanks Christoph. I resolved it using grid.bindStore(MyUpdatedStore); But your solution also rocks.Thanks a lot – Dev Jun 29 '13 at 05:04
Used grid.reconfigure(store) - worked like a charm! Thanks! – Kremena Lalova Aug 05 '15 at 16:05

score 9 · Answer 2 · answered Jun 28 '13 at 14:38

9

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();

answered Jun 28 '13 at 14:38

Christoph

1,013
11
23

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. – Dev Jun 29 '13 at 04:19

score 2 · Answer 3 · answered Jun 28 '13 at 13:52

2

Have you tried commiting your store and reloading it ?

Try this way.

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

answered Jun 28 '13 at 13:52

Shankar Damodaran

65,155
42
87
120

Thnks Shankar.Please look into my edit.I am not getting values of the store reflected in my grid. – Dev Jun 28 '13 at 14:24

score 1 · Answer 4 · answered Jun 29 '13 at 05:04

1

I resolved it using

grid.bindStore(myupdatedstore);

As stated by @Christoph

grid.reconfigure(store)

works fine as well .

answered Jun 29 '13 at 05:04

Dev

3,714
3
22
40

Updating a field in a record dyanamically in extjs

4 Answers4