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?
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);
}
});