Sencha Extjs - How to use grid getRowClass() dynamically from Controller

Question

I have a checkbox column in my grid that displays Yes/No based on checkbox selection.

Requirement: If checkbox value == Yes, change row color Green Else Leave as is (default).

Steps I have taken so far: On Ext.grid.View set the getRowClass function, something like this:

 viewConfig: {
 getRowClass: function(record, rowIndex, rowParams, store) {
 if (record.get('isApproved') == true)
   {
     return 'highlight-rowgreen';
   }                           
 },

This works perfectly fine. However I want achieve this in a store.sync callback which is not happening at the moment. There is no error, nothing. Just doesnt work.

var store = Ext.getStore('MyApp.MyStore');
        store.proxy.url = MYAPP.globals.url + "myapplication/" + branchNo + "/event/" + branchEventId;
        store.sync({
            scope: this,
            callback:function (records, operation, success) {
                if(records.proxy.reader.rawData.success){
                // Success. Set the rows color to green if not already done.                    
                   alert('Update Completed');
                   eventsGrid.getView().getRowClass = function(record, rowIndex, rowParams, store){
                       console.log('I am here');
                       if (record.get('isApproved') == true)
                       {
                        return 'highlight-rowgreen';
                       }
                      };
                  }
                  else{
                     alert('Update failed');                   
                  }
                }
        });

What I cant see is my console log "I am here". I can see the Alert message alright.

I have tried other solutions as well like this but not happening.

Any help is appreciated. Thanks

Grid rows are re-rendered whenever the relevant record's data changes, and getRowClass will be called every time. It does not matter how the data gets changed — locally only or with the involvement of remote sync. Therefore there is no need to re-define getRowClass anywhere like you are doing in sync callback. Data change will result in re-rendering the row and placing or removing your highlight-rowgreen class accordingly. See this example. — Greendrake

Vick L Vick L · Accepted Answer · 2015-07-07T16:57:57

You do not need to set rowclass again in store sync callback. It should work just as is. It could be that your grid view needs a refresh. Try this..

 store.sync({
        scope: this,
        callback:function (records, operation, success) {
            if(records.proxy.reader.rawData.success){
            // Success. Set the rows color to green if not already done.                    
               alert('Update Completed');
               eventsGrid.getView().refresh(); //refresh grid view
              }
              else{
                 alert('Update failed');                   
              }
            }
    });

Sencha Extjs - How to use grid getRowClass() dynamically from Controller

1 Answers