Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Custom Remote Grid Sort Parameters

  1. #1
    Sencha Premium User
    Join Date
    Jan 2016
    Posts
    10
    Answers
    1

    Default Answered: Custom Remote Grid Sort Parameters

    I have a question regarding something that on the surface seems so easy...

    I want to change the sort parameter that is passed when clicking a column header in a grid. This grid uses remote sorting.

    So change this: "[{"property":"claimItemId","direction":"ASC"}]"

    To something like:
    "[{"fieldId":123,"fieldClassId":90,"direction":"ASC"}]"

    fieldId and fieldClassId would be custom elements defined on the columns (i.e. { dataIndex: 'blah', fieldId: 123, fieldClassId: 90 }).



    Is this super simple and I'm just missing something?

  2. Quote Originally Posted by richardvd View Post
    Custom column sorters are not implemented for BufferedStore.
    With BufferedStores, you can sort remotely using the column's dataIndex as the sort property, and you can replace the property name through getSortParam() but you can't configure your own sorter on the grid column:

    https://www.sencha.com/forum/showthr...t-have-sorters

    That's unbelievable! Something seemingly so simple is either not supported or convoluted to implement.

    Here is how I resolved this. It's not pretty, but it seems to do the trick...

    First I applied beforeload listeners to all of the required buffered stores and then created the method (in a controller in my case) below.

    Code:
    setSortParamCfg: function(grdCols, prox, sorters)
        {
            var sortParam = [];
            var colDataIndexAr = Ext.Array.pluck( grdCols, 'dataIndex' );
    
            if (Ext.isArray(sorters))
            {
                Ext.each( sorters, function(sorter, sorterIdx, allSorters)
                {
                    var sorterProp = sorter.getProperty();
                    var colIdx = colDataIndexAr.indexOf( sorterProp );
    
                    if (colIdx == -1){ return; }
    
                    var col = grdCols[colIdx];
    
                    sortParam.push( { fieldId: col.fieldId, fieldClassId: col.fieldClassId, dir: sorter.getDirection() } );
                } );
            }
    
            prox.extraParams[prox.sortParam] = Ext.encode(sortParam);
        }
    Example of the beforeload event:

    Code:
    onBefoadLoad:function(st, op, opts)    {
            var me = this;
            var gridColumns = me.lookupReference('myGrid').getColumns();
            var sorters = op.getSorters ? op.getSorters() : st.getSorters().items;
    
            me.setSortParamCfg( gridColumns, st.getProxy(), sorters );
        }
    Short version is it takes the sorters that HAVE been applied, uses them to lookup the relevant columns to retrieve the param data needed, and force the sort parameter to the config I need.

  3. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,257
    Answers
    759

    Default

    The sorter class has a serialize function, that's what the proxy calls before sending it to the server. The answer depends on whether you want to override it globally or only in a few specific instances.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  4. #3
    Sencha Premium User
    Join Date
    Jan 2016
    Posts
    10
    Answers
    1

    Default

    Quote Originally Posted by evant View Post
    The sorter class has a serialize function, that's what the proxy calls before sending it to the server. The answer depends on whether you want to override it globally or only in a few specific instances.
    Thank you for the reply!

    Lets say for the sake of this situation that I only want it for specific instances.

  5. #4
    Sencha Premium User
    Join Date
    Jan 2016
    Posts
    10
    Answers
    1

    Default

    I don't mean to be a pain, but it was indicated that the answer depends on whether I want an global implementation or specific instances. Are there any examples of specific instance applications for what I'm trying to do?

    Honestly, it feels like I should simply be able to make use of the sorter config on a column definition, but have thus far failed to implement.

    Just need a very basic example.

  6. #5
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,257
    Answers
    759

    Default

    With the current setup, it's difficult to pass in your own sorter type declaratively without modifying other underlying pieces of code. As such, you could hack in something like this:

    Code:
    Ext.define('MySorter', {
        extend: 'Ext.util.Sorter',
    
        constructor: function(config) {
            this.initConfig(config);
        },
    
        serialize: function() {
            return {
                magic: 'ok',
                something: this.foo
            };
        }
    });
    
    Ext.application({
        name : 'Fiddle',
    
        launch : function() {
            new Ext.grid.Panel({
                renderTo: document.body,
                store: {
                    remoteSort: true,
                    proxy: {
                        type: 'ajax',
                        url: '404.json'
                    }
                },
                columns: [{
                    text: 'Click me',
                    sorter: new MySorter({
                        foo: 'bar'
                    })
                }]
            });
        }
    });
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  7. #6
    Sencha Premium User
    Join Date
    Jan 2016
    Posts
    10
    Answers
    1

    Default

    Quote Originally Posted by evant View Post
    With the current setup, it's difficult to pass in your own sorter type declaratively without modifying other underlying pieces of code. As such, you could hack in something like this:

    Code:
    Ext.define('MySorter', {
        extend: 'Ext.util.Sorter',
    
        constructor: function(config) {
            this.initConfig(config);
        },
    
        serialize: function() {
            return {
                magic: 'ok',
                something: this.foo
            };
        }
    });
    
    Ext.application({
        name : 'Fiddle',
    
        launch : function() {
            new Ext.grid.Panel({
                renderTo: document.body,
                store: {
                    remoteSort: true,
                    proxy: {
                        type: 'ajax',
                        url: '404.json'
                    }
                },
                columns: [{
                    text: 'Click me',
                    sorter: new MySorter({
                        foo: 'bar'
                    })
                }]
            });
        }
    });

    ah... ok. Well that at least lets me know I'm not just missing something. I'll give it a go! Thank you very much for the help!

  8. #7
    Sencha Premium User
    Join Date
    Jan 2016
    Posts
    10
    Answers
    1

    Default

    huh... Feel like there might be a bug here. I attempted what you suggested (assigning the sorter to the column) and I got a JS error...

    "Column.js?_dc=1531114206932:1073 Uncaught TypeError: tablepanel.store.getData(...).getSorters is not a function
    at constructor.applySorter (Column.js?_dc=1531114206932:1073)"

    It actually points to line 1073 in \ext\classic\classic\src\grid\column\Column.js which is:

    "ret = tablepanel.store.getData().getSorters().decodeSorter(sorter);"

    I wondered why it's checking the DATA of the store and looking for the getSorters method vs the store itself so I went into that file and removed ".getData()" and it worked. Even passed the params I was expecting! In your opinion, is this actually a bug or am I missing something about setting the data elements coming back from the server?

    FYI... This is 6.5.3.

    P.S. It's getting late and I may just be brain-dead...

  9. #8
    Sencha Premium User
    Join Date
    Jan 2016
    Posts
    10
    Answers
    1

    Default

    Upon further investigation... I found that it seems to only error out because the store attached to this grid is a buffered store. The approach outlined works fine, but not when using a buffered store for some reason.

    Here is a fiddle showing the issue... https://fiddle.sencha.com/#view/editor&fiddle/2j4u

  10. #9
    Sencha Premium Member richardvd's Avatar
    Join Date
    Jun 2011
    Location
    NL
    Posts
    253
    Answers
    22

    Default

    Custom column sorters are not implemented for BufferedStore.
    With BufferedStores, you can sort remotely using the column's dataIndex as the sort property, and you can replace the property name through getSortParam() but you can't configure your own sorter on the grid column:

    https://www.sencha.com/forum/showthr...t-have-sorters

  11. #10
    Sencha Premium User
    Join Date
    Jan 2016
    Posts
    10
    Answers
    1

    Default

    Quote Originally Posted by richardvd View Post
    Custom column sorters are not implemented for BufferedStore.
    With BufferedStores, you can sort remotely using the column's dataIndex as the sort property, and you can replace the property name through getSortParam() but you can't configure your own sorter on the grid column:

    https://www.sencha.com/forum/showthr...t-have-sorters

    That's unbelievable! Something seemingly so simple is either not supported or convoluted to implement.

    Here is how I resolved this. It's not pretty, but it seems to do the trick...

    First I applied beforeload listeners to all of the required buffered stores and then created the method (in a controller in my case) below.

    Code:
    setSortParamCfg: function(grdCols, prox, sorters)
        {
            var sortParam = [];
            var colDataIndexAr = Ext.Array.pluck( grdCols, 'dataIndex' );
    
            if (Ext.isArray(sorters))
            {
                Ext.each( sorters, function(sorter, sorterIdx, allSorters)
                {
                    var sorterProp = sorter.getProperty();
                    var colIdx = colDataIndexAr.indexOf( sorterProp );
    
                    if (colIdx == -1){ return; }
    
                    var col = grdCols[colIdx];
    
                    sortParam.push( { fieldId: col.fieldId, fieldClassId: col.fieldClassId, dir: sorter.getDirection() } );
                } );
            }
    
            prox.extraParams[prox.sortParam] = Ext.encode(sortParam);
        }
    Example of the beforeload event:

    Code:
    onBefoadLoad:function(st, op, opts)    {
            var me = this;
            var gridColumns = me.lookupReference('myGrid').getColumns();
            var sorters = op.getSorters ? op.getSorters() : st.getSorters().items;
    
            me.setSortParamCfg( gridColumns, st.getProxy(), sorters );
        }
    Short version is it takes the sorters that HAVE been applied, uses them to lookup the relevant columns to retrieve the param data needed, and force the sort parameter to the config I need.

Page 1 of 2 12 LastLast

Similar Threads

  1. [DUP] Grid Selection Problem - remote filter and remote sort
    By lombras in forum Ext 5: Bugs
    Replies: 1
    Last Post: 5 Feb 2015, 10:02 PM
  2. Replies: 0
    Last Post: 5 Feb 2015, 11:41 AM
  3. Remote Sort Parameters
    By ianc in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 16 Mar 2011, 8:54 AM
  4. Custom remote sort columns
    By markalroberts in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 7 Sep 2009, 1:44 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •