Sencha Touch - Wie ändert man die Zeilenfarbe eines Rasters dynamisch?

Question

Ich habe eine Rasterkomponente mit Speicher in meiner Ansichtsseite.

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

Ich mag würde die Zeilenfarbe ändern, hängt von dem Wert im Speicher.

Leider habe ich nur die Lösung für ExtJS gefunden, aber nicht für Sencha Touch.

In ExtJs kann die Zeilenfarbänderung auf diese Weise sein: Styling row in ExtJS

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

Ich mag die genau gleiche Sache in Sencha Touch haben, aber ich kann nicht die gleiche Methode in der Sencha Touch finden API-Dokument, nur in ExJs verfügbar.

Hat jemand eine andere Idee, wie diese Funktion in Sencha Touch durchgeführt werden kann?

Aktualisiert: Versuchte Antwort ‚JChap

Ich bin mit Sencha Touch 2.3

Nach JChap Antwort. Ich habe die Grid-Klasse auf diese Weise überschrieben. Der Speicherort der Datei App> Überschreibung> Gitter> Grid.js, mit dem 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); 
    } 
}); 

Und meine Art und Weise, es zu benutzen unterscheidet sich von JChap, unten ist meine Ansicht Seite

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

Ich glaube, ich benutze die Override-Klasse nicht korrekt, kann jemand meinen Fehler aufzeigen? Vielen Dank.

Answer 1

Es gibt keine solche Option in Sencha Touch. Aber wir können eins hinzufügen, indem wir die List-Klasse überschreiben. Hier ist, wie ich die List-Klasse überschrieben habe.

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

Und hier ist, wie es

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

Hinweis verwenden: In meinem Fall i Liste bin mit, da Grid von Liste erweitert sollte dies für Sie arbeiten.