EXTJS6.2现代网格行的颜色

Question

我正面临一个问题。我正在构建一个EXTJ6.2现代应用程序与Sencha架构师4.1。我正在使用面板中的网格组件和服务器加载的存储。我想根据我所掌握的数据对行进行着色。

在经典中，这是可以与

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

我试过这个在现代，但不起作用。有没有人知道我可以用另一种方法或黑客对行进行着色？或者顶多至少改变单色背景。

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

Answer 1

在现代，您可以使用itemConfig来配置Ext.grid.Row。

将下面的代码添加到番泻叶中

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

我希望这能帮上忙。

Answer 2

若要为一行着色，以下代码无法在我的项目中工作

itemConfig: {
    listeners: {
        painted: function(row) {
            var record = row.getRecord();
        }
    }
}

row.getRecord不工作(getRecord()不能被识别为函数)

我成功地将一个单元格中的一行着色。

columns: [{
    text: 'Name',
    dataIndex: 'name',
    width: 150,
    sortable: true,
    renderer: function(v, record, dataIndex, cell) {
        var row = cell.up();
        row.setStyle('background: ' + record.get('color') + ';');
        return v;
    }
}]

Answer 3

我发现被接受的答案中所建议的解决方案对我都没有很好的效果。使用已绘制事件处理程序的解决方案只在第一次加载时工作。如果数据被更新，那么样式不会改变，因此行仍然按照原始数据着色。如果您有大量列或希望有多个呈现器，则呈现器解决方案很难处理。

对于其他同舟共济的人，我的解决方案如下：

itemConfig: {
    viewModel: true,
    bind: {
        cls: '{record.IsEnabled === false ? "disabled" : ""}'
    }
}