Question

我有一个extJs（3.0）网格面板，使用json从postgresql数据库加载。这是我的网格面板代码段：

var drop_pick_grid = new Ext.grid.GridPanel({
store : dropPickGridStore,
cm : new Ext.grid.ColumnModel([ selectModel, {
    sortable : true,
    header : "Drop/Pick Loc",
    dataIndex : 'locationName',
    width : 170
}, {
    header : "Town/City",
    sortable : true,
    dataIndex : 'city',
    width : 120
}, {
    header : "Address",
    sortable : true,
    dataIndex : 'addr',
    width : 170
}, {
    header : "EST.Un/Load Time",
    sortable : true,
    dataIndex : 'estimatedTime',
    width : 100
} ]),
sm : selectModel,
/*viewConfig: {
    getRowClass: function(record, index) {
        var color = record.get('tourTypeColor');
        if (c == 'Kandy') {
            alert('Kandy');
        }
    }
},*/
//width : 570,
//height : 390,
autoHeight : true,
autoWidth : true,
frame : true,
iconCls : 'icon-grid',
renderTo : document.body
});

我的Json数据：

{'dropPickLoc':[{ 'locationName' : 'Gayan Hardware', 'city' : 'Galle', 'addr' : '121, Wijaya Rd, Galle', 'estimatedTime' : '120', 'tourTypeColor' : 'blue' } , { 'locationName' : 'Kandy Hardware', 'city' : 'Kandy', 'addr' : '11, Kurunagala Road, Kandy', 'estimatedTime' : '40', 'tourTypeColor' : 'blue' } , { 'locationName' : 'Mala Stores', 'city' : 'Colombo', 'addr' : '11B, Thimbirigasyaya, Colombo', 'estimatedTime' : '45', 'tourTypeColor' : 'yellow' } , { 'locationName' : 'Namal Ceramic', 'city' : 'Kurunagala', 'addr' : '12B, Lumbini Udyanaya, Kurinagala', 'estimatedTime' : '45', 'tourTypeColor' : 'yellow' } , { 'locationName' : 'Priya Ceramic', 'city' : 'Nugegoda', 'addr' : '15, Nugegoda', 'estimatedTime' : '40', 'tourTypeColor' : 'yellow' } , { 'locationName' : 'Sam Stores', 'city' : 'Galle', 'addr' : '46A, Galle', 'estimatedTime' : '120', 'tourTypeColor' : 'green' } , { 'locationName' : 'Saman Stores', 'city' : 'Polgahawela', 'addr' : '111, Kurunagala Rd, Kurunagala', 'estimatedTime' : '120', 'tourTypeColor' : 'blue' } , { 'locationName' : 'Sell-X Computors', 'city' : 'Ratnapura', 'addr' : '12, Tiriwanakatiya, Ratnapura', 'estimatedTime' : '120', 'tourTypeColor' : 'green' } , { 'locationName' : 'Super Stores', 'city' : 'Kandy', 'addr' : '16, Kandy Road', 'estimatedTime' : '120', 'tourTypeColor' : 'blue' } , { 'locationName' : 'Wijesingha Hardware', 'city' : 'Galle', 'addr' : '113A, Wackewella Road, Galle', 'estimatedTime' : '120', 'tourTypeColor' : 'green' } ]}

网格已成功加载。现在我需要更改“位置名称”列的背景颜色。根据我的Json数据，每个位置名称都有一个 tourTypeColor 。我需要根据这种颜色更改每个位置名称单元格。

任何建议都是相关的。请帮我一些代码段。

非常感谢

Answer 1

我使用ExtJS 3并不是那么坚定。

我会尝试为您的“Drop / Pick Loc”列定义一个rendere，如下所示：

{
    sortable : true,
    header : "Drop/Pick Loc",
    dataIndex : 'locationName',
    width : 170,
    renderer : function(value, metaData, record, rowIndex, colIndex, store) {

                   metaData.attr = 'style="color:' + record.get('tourTypeColor') + ';"';
                   return value;
               }
}

ExtJs 3：更改网格的单元格背景颜色

1 个答案: