如何为 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
});
}
});

希望对您有所帮助。

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

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

How to color EXTJS 6.2 modern grid row

css

grid

row

background-color

extjs6-modern