Results 1 to 4 of 4

Thread: Grid column sort with remote sort/paging

  1. #1
    Sencha Premium Member
    Join Date
    Jul 2014
    Posts
    18
    Answers
    1
    Vote Rating
    4
      1  

    Default Grid column sort with remote sort/paging

    This appears to be an old issue -- I digged in the forum and found the following links:

    http://www.sencha.com/forum/showthread.php?145779
    http://www.sencha.com/forum/showthread.php?3188

    Basically I would like to reset the paging to page 1 when user click the column header to sort the grid. Currently there seem to have two ways, both have its problem:
    1. Override the doSort method for Ext.grid.column.Column, it is a hack but indeed the more elegant way among the two (so I don't have to make changes on every grid instance). The issue is it is trying to override a private method and apparently stopped working with ExtJs 5.

    2. Reset the paging/offset of the grid store in a sortchange event listener. This is what I have to use with ExtJs5 now. However apparently the sortchange event is fired after the ajax proxy data load, so basically for every sort I am sending tow server request. The first one is a total waste.

    Can anybody think of another approach? Otherwise it would be nice if Sencha can open up the doSort method, or add a beforesortchange event listener, or change the default behavior of the grid/paging combo.

  2. #2
    Sencha Premium Member
    Join Date
    Jul 2014
    Posts
    18
    Answers
    1
    Vote Rating
    4
      0  

    Default

    To add:I found another thread here:http://stackoverflow.com/questions/2...in-ext-js-5For the method 1 above, apparently I need to override the sort function instead of doSort now. However it is still a private method (hack).

  3. #3
    Sencha User yeghikyan's Avatar
    Join Date
    Mar 2009
    Location
    München
    Posts
    574
    Answers
    98
    Vote Rating
    46
      0  

    Default

    Oder so?
    Code:
    Ext.application({    name: 'Fiddle',
    
    
        launch: function() {
            var pageSize = 10;
            var musterStore = Ext.create('Ext.data.Store', {
                fields: ['FirstName', 'SecondName'],
                pageSize: pageSize,
                proxy: {
                    type: 'ajax',
                    url: 'mustermansServer',
                    reader: {
                        type: 'json',
                        rootProperty: 'items',
                        totalProperty: 'total'
                    }
                }
            });
    
    
            var grid = Ext.create('Ext.grid.Panel', {
                title: "Mustermans",
                store: musterStore,
                height: 300,
                dockedItems: [{
                    xtype: 'pagingtoolbar',
                    store: musterStore,
                    dock: 'bottom',
                    displayInfo: true
                }],
                renderTo: Ext.getBody(),
                columns: [{
                    text: 'First Name',
                    dataIndex: 'FirstName'
                }, {
                    text: 'Second Name',
                    dataIndex: 'SecondName',
                    flex: 1
                }],
                listeners: {
                    sortchange: function() {
                        this.getDockedItems('toolbar[dock="bottom"]')[0].moveFirst();
                    }
                }
            });
        }
    The competent programmer is fully aware of the strictly limited size of his own skull; therefore he approaches the programming task in full humility, and among other things he avoids clever tricks like the plague.

  4. #4
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    15
    Vote Rating
    0
      0  

    Default

    Thanks yeghikyan, that works perfect.

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
  •