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

问题描述

我创建了以下ExtJS网格。

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

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

  var myData = [
 [4，'这是一堆文本将在这个列中打包字，'，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：'Ymd H：i：s'
}]）; 
 
 var grid = new Ext.grid.GridPanel（{
 region：'center'，
 style：'color：red'，//使网格中的所有文本为红色，我只想要一行是红色
存储：新的Ext.data.Store（{
数据：myData，
阅读器：myReader 
}），
列： [{
 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（'Ymd H：i： s'），
 dataIndex：'lastChange'
}]，
 viewConfig：{
 forceFit：true 
}，
标题：'计算机信息' ，
 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）; 
} 
} 
}）; 
  

我只需要修改第二个单元格的文本颜色即可行？

解决方案

不知道这是否有帮助，但可以试试。我在本地尝试，它会改变第二行中所有字符的颜色。

将侦听器添加到网格中：

  listeners：{
 viewready：function（g）{
 g.getView（）。getRow（1）.style.color =＃f30; 
} 
} 
  

当 viewready ，您可以使用 GridView 中的 getRow（）方法获取行的div。正常的Javascript分配颜色（或添加额外的课程，如果你想）

干杯

编辑

我意识到如果您的商店正在远程检索数据，则无法正常查看已准备就绪，但数据尚未就绪，此方法将失败。

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

What do I have to do to change the text color of only the cells in the second row?

解决方案

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

Add listener to the grid:

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

"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)

Cheers

EDIT

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屋！