PDA

View Full Version : [CLOSED] CustomSortType in 2.X



zfreeman
Apr 21, 2015, 7:59 AM
How do we implement the same functionality with CustomSortType as is described in this 1.X thread (http://forums.ext.net/showthread.php?12152-CLOSED-Order-GridPanel-Groups-in-an-arbitrary-order) in 2.X? I have tried adding the described javaScript as well as the following in my Model but the sorting does not change:


<ext:ModelField Name="StatusCode">
<CustomSortType Fn="mySortType" />
</ext:ModelField>

Daniil
Apr 21, 2015, 12:28 PM
Hi @zfreeman,

Yes, it appears that CustomSortType doesn't affect grouping in ExtJS 4 and Ext.NET 2.

Please clarify is the suggestion in the post #5 (http://forums.ext.net/showthread.php?12152&p=123158&viewfull=1#post123158) not good for you?

zfreeman
Apr 21, 2015, 4:10 PM
You're right - using DataSorter within Groupers does work! Thank you!

zfreeman
May 26, 2015, 7:40 PM
So how do we do implement this same functionality in 3.1? It seems Groupers is replaced with Grouper and there is no ext:DataSorter in Grouper.

Daniil
May 26, 2015, 9:39 PM
Please try this:

<Grouper Property="test1">
<Transform Fn="myGrouper" />
</Grouper>

zfreeman
May 27, 2015, 1:33 PM
I tried this (with the mySorter function being exactly like the one previously referenced, that worked in 2.X) but it doesn't have any effect on sorting:


<ext:Store ID="storeID" runat="server" GroupField="GroupField">
<Model>
<ext:Model runat="server" IDProperty="DPROverrideId">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="Field1" />
<ext:ModelField Name="Field2" />
<ext:ModelField Name="GroupField" />
</Fields>
</ext:Model>
</Model>
<Grouper Property="GroupField">
<Transform Fn="mySorter" />
</Grouper>
</ext:Store>

Daniil
May 27, 2015, 5:31 PM
Confirm.

It looks there is a different way in ExtJS 5 to achieve custom grouping. I tried with a 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" }
};
}
}
</script>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v3 Example</title>

<script>
var mySorter = function (rec1, rec2) {
var v1 = rec1.data.test1.toUpperCase(),
v2 = rec2.data.test1.toUpperCase();

if ((v1 === "B") && (v2 === "A")) {
return -1;
}

return v1 < v2;
};
</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>

zfreeman
May 27, 2015, 6:03 PM
Did this function work for you? It doesn't seem to be making a difference for me. But maybe I'm not using it right. Could you explain what is happening in the function below? If my test1 values are A, B, C, D and I want the end sorting result to be:
B, C, D, A how would I do that with this function?



<script>
var mySorter = function (rec1, rec2) {
var v1 = rec1.data.test1.toUpperCase(),
v2 = rec2.data.test1.toUpperCase();

if ((v1 === "B") && (v2 === "A")) {
return -1;
}

return v1 < v2;
};
</script>

Daniil
May 27, 2015, 6:31 PM
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.0-apidocs/#!/api/Ext.util.Sorter-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>