GridPanel - изменение цвета строки на основе значения поля состояния

Question

Скажем, у меня есть сетка образца следующим образом:

+-----------------+-------+-------+--------+ 
| PRODUCT NAME | PRICE | STOCK | STATUS | 
+-----------------+-------+-------+--------+ 
| PRODUCT A  | 10 | 15 | 0 | 
+-----------------+-------+-------+--------+ 
| PRODUCT B  | 17 | 12 | 1 | 
+-----------------+-------+-------+--------+ 

То, что я хочу сделать, изменяя цвет сетки строки на основе поля STATUS. Если статус поля равен 1, тогда цвет строки должен отличаться.

Модель

Ext.define('Article', { 
extend: 'Ext.data.Model', 
fields: [ 
    {name: 'ID', type: 'int'}, 
    {name: 'ART_NR', type: 'int'}, 
    {name: 'ART_DESC', type: 'string'}, 
    {name: 'SORTEN_TEXT', type: 'auto'}, 
    {name: 'VAR', type: 'int'}, 
    {name: 'GEBI_NR', type: 'int'}, 
    {name: 'SUBSYS_ART_NR', type: 'int'}, 
    {name: 'STATUS', type: 'int'} 
] 
}); 

Json магазин

var articles = new Ext.data.JsonStore({ 
model: 'Article', 
proxy: { 
    type: 'ajax', 
    url: '<?php echo base_url() ?>create/get_article', 
    reader: { 
     type: 'json', 
     root: 'articleList', 
     idProperty: 'ID' 
    } 
} 
}); 

Сетка Панель

  { 
      xtype: 'gridpanel', 
      id: 'variant-grid', 
      store: articles, 
      columnLines: true, 
      columns: [ 
       { 
        text: 'TANIM', 
        width: 235, 
        dataIndex: 'SORTEN_TEXT', 
        renderer: function (value, metaData, record) { 
         if (value == null) { 
          return record.get('ART_DESC'); 
         } else { 
          return record.get('SORTEN_TEXT'); 
         } 
        } 
       }, 
       {text: 'VARIANT', dataIndex: 'VAR', width: 90, align: 'center'}, 
       {text: 'GEBI', dataIndex: 'GEBI_NR', width: 90, align: 'center'}, 
       {text: 'SUBSYS', dataIndex: 'SUBSYS_ART_NR', width: 110, align: 'right'}, 
       {text: 'STATUS', dataIndex: 'STATUS', hidden: true} 
      ], 
      style: { 
       fontFamily: 'DINPro-Regular', 
       fontSize: '10pt', 
       marginBottom: '10px' 
      }, 
      height: 180, 
      width: '100%', 
      loadMask: {msg: 'Artikel bilgileri yükleniyor...'}, 
      selModel: selModels 
     } 

Answer 1

Вы можете использовать getRowClass сделать это:

В панели сетки добавить следующее:

viewConfig: { 
    getRowClass: function(record) { 
     if(record && record.get('STATUS') === 1) return 'different-color-class'; 
    } 
} 

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.view.Table-method-getRowClass