Sencha Touch - How to dynamically change the row color of a grid?

Question

I have a grid component with store in my view page.

{
xtype: 'grid',
store : { xclass : 'ABC.Store.MyStoreItem'},    
}

I would like to change the row color depends on the value in the store.

Unfortunately, I only found the solution for ExtJS , but not for Sencha Touch.

In ExtJs, the row color can be change in this way: Styling row in ExtJS

viewConfig: { 
  stripeRows: false, 
  getRowClass: function(record) { 
    return record.get('age') < 18 ? 'child-row' : 'adult-row'; 
  } 
}

I want to have the exactly same thing in Sencha Touch, but I can't find the same method in the Sencha Touch API document, it only available in ExJs.

Does anyone have any other idea on how this feature can be done in Sencha Touch ?

Updated: Tried JChap' answer

I'm using sencha touch 2.3

According to JChap's answer. I had override the Grid class in this way. The location of the file is app > override > grid > Grid.js, with the code:

Ext.define('ABC.override.grid.Grid', {
    override: 'Ext.grid.Grid',
    updateListItem: function(item, index, info) {
        var me = this,
            record = info.store.getAt(index);
        if (me.getItemClass) {
            var handler = me.getItemClass(),
                scope = me;
            if (!handler) {
                return;
            }
            if (typeof handler == 'string') {
                handler = scope[handler];
            }
            cls =  handler.apply(scope, [record, index, info.store]);
            if(item.appliedCls) {
                item.removeCls(item.appliedCls);
            }
            if (cls) {
                item.addCls(cls);
                item.appliedCls = cls;
            }
        }
        this.callParent(arguments);
    }
});

And my way of using it is different from JChap, below is my view page

Ext.define('ABC.view.Upload', {
    extend: 'Ext.Container',
    xtype: 'uploadList',
    config: {
             id: 'upload_view_id',
             items: [
                     {
                      xtype: 'container',
                      layout: 'vbox',
                      height:'100%',
                      items:[
                             {
                              xtype: 'grid',
                              itemId : 'gridUpload',
                              store : { xclass : 'ABC.store.MyStoreItem'},  
                              config: {
                                       itemClass: function(record, index) {
                                           var cls = null;
                                           if(record.get('status') === 'new') {
                                               cls = 'redRow';
                                           } 
                                           else {
                                               cls = 'greenRow';
                                           } 
                                           return cls;
                                       }
                                   },
                             columns: [ ....]
                            }
                           ]
                     }
                    ]
    }
});

I think I'm not using the override class corretly, can anyone point out my mistake ? Thanks.

JChap JChap · Accepted Answer · 2016-04-13T23:35:29

There is no such option available in sencha touch. But we can add one by overriding List class. Here is how i overwritten the List class.

Ext.define('MyApp.overrides.dataview.List', {
    override: 'Ext.dataview.List',
    updateListItem: function(item, index, info) {
        var me = this,
            record = info.store.getAt(index);
        if (me.getItemClass) {
            var handler = me.getItemClass(),
                scope = me;
            if (!handler) {
                return;
            }
            if (typeof handler == 'string') {
                handler = scope[handler];
            }
            cls =  handler.apply(scope, [record, index, info.store]);
            if(item.appliedCls) {
                item.removeCls(item.appliedCls);
            }
            if (cls) {
                item.addCls(cls);
                item.appliedCls = cls;
            }
        }
        this.callParent(arguments);
    }
});

And here is how to use it

Ext.define('MyApp.view.ProductList', {
    extend: 'Ext.List',
    xtype: 'productList',
    config: {
        itemClass: function(record, index) {
            var cls = null;
            if(record.get('status') === 'new') {
                cls = 'x-item-new';
            } 
            else if(record.get('status') === 'deleted') {
                cls = 'x-item-dropped';
            } 
            return cls;
        }
    }
});

Note: In my case i'm using List, since Grid extends from List this should work for you.

Sencha Touch - How to dynamically change the row color of a grid?

1 Answers