在ExtJS中,如何将自定义CSS类添加到数据网格行？

Question

如何将自定义CSS类添加到数据网格中的行(Ext.grid.Panel)？

我正在使用ExtJS 4.0.

Answer 1

这样做的方法是viewConfig在网格上定义:

Ext.create('Ext.grid.Panel', {
    ...

    viewConfig: {
        getRowClass: function(record, index, rowParams, store) {
            return record.get('someattr') === 'somevalue') ? 'someclass' : '';
        }
    },

    ...
});

Answer 2

在您initComponent()的Ext.grid.Panel使用getRowClass()中如下:

    initComponent: function(){
        var me = this;
        me.callParent(arguments);
        me.getView().getRowClass = function(record, rowIndex, rowParams, store) {
            if (/* some check here based on the input */) {
                return 'myRowClass';
            }
        };
    }

这基本上覆盖了在渲染时调用getRowClass()的底层函数,Ext.grid.View以应用任何自定义类.然后您的自定义CSS文件将包含以下内容:

.myRowClass .x-grid-cell {background:#FF0000; }