Well, it works in my test case, but I think my sorter function is wrong. It must return -1, 0 or 1.
http://docs.sencha.com/extjs/5.1/5.1...r-cfg-sorterFn
Example
<%@ Page Language="C#" %>
<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[] { "A", "test121", "test131" },
new object[] { "A", "test122", "test132" },
new object[] { "A", "test123", "test133" },
new object[] { "B", "test221", "test231" },
new object[] { "B", "test222", "test232" },
new object[] { "B", "test223", "test233" },
new object[] { "C", "test321", "test331" },
new object[] { "C", "test322", "test332" },
new object[] { "C", "test323", "test333" },
new object[] { "D", "test421", "test431" },
new object[] { "D", "test422", "test432" },
new object[] { "D", "test423", "test433" }
};
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v3 Example</title>
<script>
var mySorter = function (rec1, rec2) {
var v1 = getOrderNumber(rec1.data.test1),
v2 = getOrderNumber(rec2.data.test1);
if (v1 < v2) {
return -1;
} else if (v1 == v2) {
return 0;
} else {
return 1;
}
};
var getOrderNumber = function(a) {
a = a.toUpperCase();
switch(a) {
case "A": return 4;
case "B": return 1;
case "C": return 2;
case "D": return 3;
}
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
<Grouper Property="test1">
<SorterFn Fn="mySorter" />
</Grouper>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test1" DataIndex="test1" />
<ext:Column runat="server" Text="Test2" DataIndex="test2" />
<ext:Column runat="server" Text="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
<Features>
<ext:Grouping runat="server" />
</Features>
</ext:GridPanel>
</form>
</body>
</html>