Sencha Touch - Bir kılavuzun satır rengini dinamik olarak nasıl değiştirebilirim?

Question

Görünüm sayfamda depo içeren bir ızgara bileşenim var.

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

Satır rengini, mağazadaki değere bağlı olarak değiştirmek istiyorum.

Ne yazık ki, sadece ExtJS çözümü buldum, ancak Sencha Touch için değil.

extjs yılında satır rengi bu şekilde değişim olabilir: Styling row in ExtJS

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

Ben Sencha'sı Touch tam olarak aynı şeyi yapmak istiyorum ama Sencha'sı Touch aynı yöntemi bulamıyorum API belgesi, sadece ExJ’lerde kullanılabilir.

Bu özelliğin Sencha Touch'ta nasıl yapılabileceği konusunda başka bir fikri var mı?

Updated: Ben JChap cevabı göre 2.3

sencha dokunmatik kullanıyorum JChap' Cevap

çalıştı. Grid sınıfını bu şekilde geçersiz kıldım. dosyasının konumu> uygulaması> geçersiz kılma> ızgara olduğunu koduyla, 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); 
    } 
}); 

Ve bunu kullanarak tarzım JChap farklıdır, aşağıda benim bakış sayfası

olduğunu

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

Sanırım geçersiz kılma sınıfını kullanmıyorum, hata yaptığımı kimse işaretleyebilir mi? Teşekkürler.

Answer 1

Sencha dokunuşunda böyle bir seçenek yoktur. Ancak, List sınıfını geçersiz kılarak bir tane ekleyebiliriz. List sınıfının üzerine yazdım. I Listesini kullanıyorum Benim durumumda Kutu Liste uzanır beri bu sizin için çalışması gerekir: Burada

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

Ve o

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

Not kullanmak nasıl.