css - 如何为 EXTJS 6.2 现代网格行着色

Question

我遇到了一个问题。我正在使用 Sencha architect 4.1 构建一个 EXTJ 6.2 modern 应用程序。我在我的面板中使用带有服务器加载商店的网格组件。我想根据我拥有的数据为行着色。

在经典中，这可以通过

实现

viewConfig: {
  forceFit: true,  
  getRowClass: function(record, rowIndex, p, store) { 
     //some if statement here  
}

我在 modern 中试过了，但没用。有谁知道我可以为行着色的另一种方式或技巧？或者至多至少更改单色背景。

如果可能的话，我真的很想避免使用列表组件。

Answer 1

在现代你可以使用itemConfig配置 Ext.grid.Row。

将下面的代码添加到 Sencha Fiddle :

 Ext.application({
name : 'Fiddle',

launch : function() {
    var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [
    { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224", color: "blue"  },
    { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234", color: "green" },
    { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244", color: "yellow" },
    { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254", color: "red" }
]
});

Ext.create('Ext.grid.Grid', {
title: 'Simpsons',

variableHeights: true,

store: store,

itemConfig: {
    listeners: {
        painted: function (row) {
            var record = row.getRecord();
            var color = record.get('color');

            row.setStyle('background: '+color)

            //if (color == 'red')
                //row.setStyle('background: red');
        }
    }
},

columns: [
    { 
        text: 'Name',  
        dataIndex: 'name', 
        minWidth: 200, 
        //flex: 1,
        //cellWrap: true,
        cell: {
            bodyStyle: {
                whiteSpace: 'normal'
            }
        }
    },
    { 
        text: 'Email', 
        dataIndex: 'email', 
        flex: 2, 
        minWidth: 250 

    },
    { 
        text: 'Phone', 
        dataIndex: 'phone', 
        flex: 1,  
        minWidth: 120
    },
    {
        text: 'Color',
        dataIndex: 'color',
        flex: 1
    }
],

//height: 200,
//layout: 'fit',
fullscreen: true
});
}
});

itemConfig 部分可以解决问题。

在@Gwynge 的评论之后，我创建了另一个示例，使用 renderer 配置为每个单元格设置颜色:

Ext.application({
name : 'Fiddle',

launch : function() {
    var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [
    { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224", color: "blue"  },
    { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234", color: "green" },
    { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244", color: "yellow" },
    { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254", color: "red" }
]
});

Ext.create('Ext.grid.Grid', {
title: 'Simpsons',

variableHeights: true,

store: store,

columns: [
    { 
        text: 'Name',  
        dataIndex: 'name', 
        minWidth: 200, 
        //flex: 1,
        //cellWrap: true,
        cell: {
            bodyStyle: {
                whiteSpace: 'normal'
            }
        },
        renderer: function(value, record, dataIndex, cell) {
           cell.setStyle('background: '+record.get('color')+';')     
           return value;
        }
    },
    { 
        text: 'Email', 
        dataIndex: 'email', 
        flex: 2, 
        minWidth: 250,
        renderer: function(value, record, dataIndex, cell) {
           cell.setStyle('background: '+record.get('color')+';')     
           return value;
        }
    },
    { 
        text: 'Phone', 
        dataIndex: 'phone', 
        flex: 1,  
        minWidth: 120,
        renderer: function(value, record, dataIndex, cell) {
           cell.setStyle('background: '+record.get('color')+';')     
           return value;
        }
    },
    {
        text: 'Color',
        dataIndex: 'color',
        flex: 1,
        renderer: function(value, record, dataIndex, cell) {
           cell.setStyle('background: '+record.get('color')+';')     
           return value;
        }
    }
],

//height: 200,
//layout: 'fit',
fullscreen: true
});
}
});

希望对您有所帮助。