如何更改 ExtJS 网格中仅一行的文本颜色? [英] How to change the text color of only one row in an ExtJS grid?

问题描述

我创建了以下 ExtJS 网格.

I've created the following ExtJS grid.

我想更改第二行中所有单元格的文本颜色.

I want to change the text color of all the cells in the second row.

但是，我只能找出如何更改所有行中所有单元格的颜色，包括标题文本，如下所示:

However, I can only find out how to change the color of all cells in all rows including the header text, as show here:

var myData = [
    [4, 'This is a whole bunch of text that is going to be word-wrapped inside this column.', 0.24, 3.0, '2010-11-17 08:31:12'],
    [16, 'Computer2-this row should be red', 0.28, 2.7, '2010-11-14 08:31:12'],
    [5, 'Network1', 0.02, 2.5, '2010-11-12 08:31:12'],
    [1, 'Network2', 0.01, 4.1, '2010-11-11 08:31:12'],
    [12, 'Other', 0.42, 5.0, '2010-11-04 08:31:12']
];

var myReader = new Ext.data.ArrayReader({}, [{
        name: 'id',
        type: 'int'
    }, {
        name: 'object',
        type: 'object'
    }, {
        name: 'status',
        type: 'float'
    }, {
        name: 'rank',
        type: 'float'
    }, {
        name: 'lastChange',
        type: 'date',
        dateFormat: 'Y-m-d H:i:s'
    }]);

var grid = new Ext.grid.GridPanel({
    region: 'center',
    style: 'color:red', //makes ALL text in grid red, I only want one row to be red
    store: new Ext.data.Store({
        data: myData,
        reader: myReader
    }),
    columns: [{
            header: 'ID',
            width: 50,
            sortable: true,
            dataIndex: 'id',

            hidden: false

        }, {
            header: 'Object',
            width: 120,
            sortable: true,
            dataIndex: 'object',
            renderer: columnWrap

        }, {
            header: 'Status',
            width: 90,
            sortable: true,
            dataIndex: 'status'
        }, {
            header: 'Rank',
            width: 90,
            sortable: true,
            dataIndex: 'rank'
        }, {
            header: 'Last Updated',
            width: 120,
            sortable: true,
            renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'),
            dataIndex: 'lastChange'
        }],
    viewConfig: {
        forceFit: true
    },
    title: 'Computer Information',
    width: 500,
    autoHeight: true,
    frame: true,
    listeners: {
        'rowdblclick': function(grid, index, rec){
            var id = grid.getSelectionModel().getSelected().json[0];
            go_to_page('edit_item', 'id=' + id);
        }
    }
});

如何只更改第二行单元格的文本颜色?

推荐答案

不确定这是否有帮助，但您可以尝试.我在本地尝试过，它确实改变了第 2 行中所有字符的颜色.

not sure if this helps, but you can try. I tried locally, it does change the color of all the characters in 2nd row.

向网格添加监听器:

listeners:{
    viewready: function(g){
        g.getView().getRow(1).style.color="#f30";
    }
}

"当viewready时，你可以使用GridView中的getRow()方法获取该行的div.之后就是正常的赋值Javascript颜色(或添加额外的类，如果你愿意)

"When viewready, you can get the row's div by using getRow() method from GridView. After that is normal Javascript of assigning colors (or adding extra class, if you want)

干杯

编辑

我意识到如果您的商店正在远程检索数据，这将不起作用.视图已准备好但数据尚未准备好.这种方法会失败.

I realize it's not working if your store is retrieving data remotely. View is ready but data is not ready. This method would fail.

这篇关于如何更改 ExtJS 网格中仅一行的文本颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！