Sencha Touch - Как динамически менять цвет строки сетки?

Question

У меня есть элемент сетки с магазином на моей странице просмотра.

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

Я хочу изменить цвет строки в зависимости от значения в магазине.

К сожалению, я нашел решение для ExtJS, но не для Sencha Touch.

В ExtJS, цвет строки можно изменить следующим образом: Styling row in ExtJS

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

Я хочу, чтобы иметь точно такую ​​же вещь в Сенча Touch, но я не могу найти тот же метод в Сенча сенсорный API, он доступен только в ExJ.

Есть ли у кого-нибудь другая идея, как эта функция может быть выполнена в Sencha Touch?

Обновлено: Пробовал ответа JChap»

Я использую Сенча сенсорный 2.3

Согласно ответу JChap в. Таким образом, я переопределил класс Grid. Расположение файла приложение> переопределение> Сетка> Grid.js, с кодом:

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

И мой способ его использования отличается от JChap, ниже мой взгляд страницы

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: [ ....] 
          } 
          ] 
        } 
        ] 
    } 
}); 

Я думаю, что я не использую класс переопределения, может ли кто-нибудь указать на мою ошибку? Благодарю.

Answer 1

В sencha touch такой опции нет. Но мы можем добавить один, переопределив класс List. Вот как я перезаписал класс List.

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

А вот как использовать его

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

Примечание: В моем случае я использую список, так как сетка проходит из списка это должно работать для вас.