Yes, I had to check sorting. It doesn't work.
Well, more complex solution is required there. You could apply the respective change to data.colors for each record after sorting.
But I would suggest you to store a color for each cell.
Example
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] {
new {
value = "test1"
},
new {
value = 1
},
new {
value = 1.0
}
},
new object[] {
new {
value = "test2"
},
new {
value = 2
},
new {
value = 2.0
}
},
new object[] {
new {
value = "test3"
},
new {
value = 3
},
new {
value = 3.0
}
}
};
store.DataBind();
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.Net Example</title>
<script type="text/javascript">
var myRenderer = function (v, metadata, record, rowIndex, columnIndex) {
metadata.css = v.color;
return v.value;
}
var onCellClick = function (grid, rowIndex, columnIndex) {
var record = grid.store.getAt(rowIndex),
dataIndex = grid.colModel.getDataIndex(columnIndex),
v = record.get(dataIndex);
v.color = v.color ? "" : "column-" + columnIndex;
grid.view.refreshRow(record);
}
var asText = function (s) {
return Ext.data.SortTypes.asText(s.value);
}
var asInt = function (s) {
return Ext.data.SortTypes.asInt(s.value);
}
var asFloat = function (s) {
return Ext.data.SortTypes.asFloat(s.value);
}
</script>
<style type="text/css">
.column-0 {
background-color: red;
}
.column-1 {
background-color: green;
}
.column-2 {
background-color: blue;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel
ID="GridPanel1"
runat="server"
AutoHeight="true"
DisableSelection="true">
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="test1" IsComplex="true">
<CustomSortType Fn="asText" />
</ext:RecordField>
<ext:RecordField Name="test2" IsComplex="true">
<CustomSortType Fn="asInt" />
</ext:RecordField>
<ext:RecordField Name="test3" IsComplex="true">
<CustomSortType Fn="asFloat" />
</ext:RecordField>
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column Header="Test1" DataIndex="test1">
<Renderer Fn="myRenderer" />
</ext:Column>
<ext:Column Header="Test2" DataIndex="test2">
<Renderer Fn="myRenderer" />
</ext:Column>
<ext:Column Header="Test3" DataIndex="test3">
<Renderer Fn="myRenderer" />
</ext:Column>
</Columns>
</ColumnModel>
<Listeners>
<CellClick Fn="onCellClick" />
</Listeners>
</ext:GridPanel>
</form>
</body>
</html>