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

APIドキュメント、ExJsでのみ利用可能です。

誰もがこの機能をSencha Touchでどのように行うことができるか、他のアイデアはありますか？

更新日：試しましたJChap」答え

を私はJChapの答えによると煎茶タッチ2.3

を使用しています。私はこのように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

このようなオプションはありません。しかし、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; 
     } 
    } 
}); 

それを使用する方法です。注：私の場合は、リストを使用しています、グリッドはリストから延びているので、これはあなたのために働く必要があります。