Search code examples
javascriptsortingextjsgridstore

ExtJS 5.0 : Grid remoteSort always sorts by the default 'sorters' only


I have an EXTJS Grid which has a buffered store. I have enabled remoteSort: true on this store. Several of the columns are marked sortable: true. But every time I click on any column for sorting, the backend call that is made only includes the sorters column and direction that is mentioned in the store. Ex. Even if I click on Col2 or Col3 for sorting, the GET call the backend always includes 'sort: col1, direction: desc', as mentioned in the 'sorters'.

Store:

Ext.define('MyStore', {
  extend: 'Ext.data.BufferedStore',
 model  : 'MyModel'

  pageSize: 200,
  autoLoad: false,
  leadingBufferZone: 200,
  trailingBufferZone: 200,
  remoteSort: true,
  sorters: [{
    property: 'col1',
    direction: 'DESC'
  }],

  proxy: {
    type  : 'rest',
    format: 'json',
    url   : '/my_app/my_controller/list',
    extraParams: {
      someparam: '',
      otherparam: ''
    },
    reader: {
      type: 'json',
      rootProperty: 'data',
      totalProperty: 'totalCount'
    }
  }  
});

Grid:

Ext.define('MyPanel', {
    extend: 'Ext.grid.Panel',
    requires: [
    'MyStore'
    ],
    initComponent: function() {
        this.store = new MyStore();
        this.callParent(arguments);
    },
    columns: [{
        text: 'Col1',
        dataIndex: 'col1',
        width: 150,
        sortable: true
    },{
        text: 'Col3',
        dataIndex: 'col3',
        width: 150,
        sortable: true
    },{
        text: 'Col3',
        dataIndex: 'col3',
        width: 250,
        sortable: true
    }]
});

How can I enable this grid to sort by any sortable column that is clicked?


Solution

  • Temporary fix for bug in ExtJS 5.0. See: https://www.sencha.com/forum/showthread.php?284772-remoteSort-doesn-t-work-with-BufferedStore

    Ext.override(Ext.data.BufferedStore, { 
         sort: function(column, direction, mode){      
          this.getSorters().addSort(column, direction, mode);
          this.callParent(arguments);
        }
    });