What's New?

[CLOSED] CustomSortType in 2.X

  1. #1
    Apr 21, 2015, 7:59 AM

    [CLOSED] CustomSortType in 2.X

    How do we implement the same functionality with CustomSortType as is described in this 1.X thread (http://forums.ext.net/showthread.php...rbitrary-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>
    Last edited by Daniil; Apr 21, 2015 at 6:48 PM. Reason: [CLOSED]
  2. #2
    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 not good for you?
  3. #3
    Apr 21, 2015, 4:10 PM
    You're right - using DataSorter within Groupers does work! Thank you!
  4. #4
    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.
  5. #5
    May 26, 2015, 9:39 PM
    Please try this:
    <Grouper Property="test1">
    <Transform Fn="myGrouper" />
</Grouper>
  6. #6
    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>
  7. #7
    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>
    Last edited by Daniil; May 27, 2015 at 6:29 PM.
  8. #8
    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>
  9. #9
    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...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>

Similar Threads

  1. How to implement CustomSortType on server side
    By cicaglisa in forum 1.x Help
    Replies: 1
    Last Post: Mar 26, 2012, 5:50 PM
  2. How to use CustomSortType ?
    By reverseblade in forum 1.x Help
    Replies: 0
    Last Post: Apr 19, 2010, 9:04 AM

Posting Permissions