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

我想在Sencha Touch中拥有完全相同的东西，但我在Sencha Touch API文档中找不到相同的方法，它只在ExJs中可用。

有没有人知道如何在Sencha Touch中完成此功能？

更新：尝试了JChap的回答

我正在使用sencha touch 2.3

根据JChap的回答。我以这种方式覆盖了Grid类。文件的位置是 app＆gt;覆盖＆gt;网格＆gt; 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;
        }
    }
});

注意：在我的情况下，我正在使用List，因为Grid从List扩展，这应该适合你。

Sencha Touch - 如何动态更改网格的行颜色？

1 个答案: