Custom function call after Extjs 4 grid sorting

Question

I have an Extjs 4 grid with sorting ability. I want to call the custum function after each user clicks the sort button.

In my user function, I want to go to the first page of my grid (my grid uses pagination and takes advantage of the server side), I think I should use store.loadPage(1) in my user function (correct me if I wrong)

where should i put my custom function?

This is my Ext.OnReady() function:

 Ext.onReady(function() { Ext.tip.QuickTipManager.init(); var url = { local: 'grid-filter.json', // static data file remote: 'grid-filter.php' }; var paging = true; var encode = false; var local = false; Ext.define('UserDirectoryDataModel', { extend : 'Ext.data.Model', fields : [ 'uname', 'fname', 'lname', 'postcode', 'mail', { name : 'pass' }, 'hasAccess', 'isActive', 'lastVisit' , 'deleteUser'], idProperty : 'uname' }); var itemsPerPage = 20; var store = Ext.create('Ext.data.Store', { pageSize : itemsPerPage, autoLoad: false, local: false, autoDestroy: true, model : 'UserDirectoryDataModel', autoSync : true, sortOnLoad : true, remoteSort:true, sorters : { property : 'uname', direction : 'ASC' }, listeners: { beforeload: function(){ store.loadPage(1); } }, proxy : { type : 'ajax', url: (local ? url.local : url.remote), api : { read : 'read.php', update : 'update.php' }, reader : { type : 'json', root : 'users', successProperty : 'success', totalProperty : 'totalCount' }, writer : { type : 'json', writeAllFields : true, encode : false, root : 'users' }, afterRequest : function(request, success) { if (request.action == 'update') { if (success) { Ext.MessageBox.alert('alert', 'data updated!'); } } } } }); store.load({ params:{ start:0, limit: itemsPerPage } }); var filters = { ftype: 'filters', encode: encode, // json encode the filter query local: local, // defaults to false (remote filtering) filters: [ { } ] }; var createColumns = function (finish, start) { var columns = [ { text : "username", dataIndex : 'uname', width : 150, filterable: true, align : 'right' }, { text : "name", dataIndex : 'fname', width : 150, align : 'right', hidden : false, sortable : true, filterable: true, editor : { xtype : 'textfield', allowBlank : false } }, { text : "last name", dataIndex : 'lname', width : 150, align : 'right', sortable : true, filterable: true, editor : { xtype : 'textfield', allowBlank : false } }, { text : "PostalCode", dataIndex : 'postcode', width : 110, align : 'right', sortable : true, filterable: true, editor : { xtype : 'textfield', allowBlank : false } }, { text : "email", dataIndex : 'mail', width : 200, align : 'right', sortable : true, filterable: true, editor : { xtype : 'textfield', allowBlank : false } }, { text : "password", width : 150, align : 'right', sortable : false, filterable: true, hidden : true, dataIndex : 'pass', editor : { xtype : 'textfield', inputType : 'password', allowBlank : true } }, { text : "access to system", dataIndex : 'hasAccess', renderer:function(value){ if(value[0]=="1"){ return "<a href=\"?action=access&type=revoke&cn="+value.substring(1,value.length)+"\">has</a>"; }else{ return "<a href=\"?action=access&type=grant&cn="+value.substring(1,value.length)+"\">doens't have</a>"; } }, width : 100, align : 'center', sortable : false, filterable: false }, { text : "active", dataIndex : 'isActive', renderer:function(value){ if(value==null) return; if(value[0]=="1"){ return "<a href=\"?action=activation&type=grant&cn="+value.substring(1,value.length)+"\">no</a>"; }else if(value[0]=="0"){ return "<a href=\"?action=activation&type=revoke&cn="+value.substring(1,value.length)+"\">yes</a>"; }else if(value[0]=="2"){ return "Not in portal!"; } }, width : 100, align : 'center', sortable : false, filterable: false }, { text : "last visit", dataIndex : 'lastVisit', width : 120, hidden : true, align : 'right', sortable : true, filterable: true }, { text : " ", dataIndex : 'uname', renderer:function(value){ return "<a href=\"?action=delete&type=deleteUser&cn="+value+"\">delete</a>"; }, width : 120, hidden : true, align : 'right' } ]; return columns.slice(start || 0, finish); }; var pluginExpanded = true; var grid = Ext.create('Ext.grid.Panel', { border: false, width : 1200, height : 620, title : '', store: store, disableSelection : false, seltype : 'rowmodel', loadMask : true, viewConfig : { id : 'gv', trackOver : false, stripeRows : false, plugins : [ { ptype : 'preview', bodyField : 'excerpt', expanded : true, pluginId : 'preview' } ] }, columns: createColumns(), features: [filters], dockedItems: [Ext.create('Ext.toolbar.Paging', { dock: 'bottom', store: store })], plugins : [ Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit : 2 }) ], renderTo : 'userdatagrid' }); grid.child('pagingtoolbar').add([ { text: 'show filters', handler: function () { var data = Ext.encode(grid.filters.getFilterData()); Ext.Msg.alert('show filters',data); } },{ text: 'delete filters', handler: function () { grid.filters.clearFilters(); } } ]); store.loadPage(1); }); 

Answer 1

Or you can use this:

 grid.on('sortchange', function() { grid.getStore().loadPage(1); }); 

Answer 2

Forget everything I wrote: Server-side sorting in ExtJS GridPanel

You must put your custom function in a grid event: sortchange .

I'm just re-reading your question - I thought you had endless paging.
If your sort is running on the server side, then yes, you need to call loadPage (1).
You also need to send the sorting options.

 listeners: { sortchange: function(){ var grid = Ext.ComponentQuery.query('my-grid-alias')[0]; grid.getStore().loadPage(1); } } 

Hope this helps.

Answer 3

I just put loadPage (1) in the sortchange event, but made a server request twice (the grid did the first with the sorting options automatically), how could this be only once?

Answer 4

I will find out one solution, I installed "remoteSort:false" in the repository and

 "sortchange: {fn:function(){ var time = (new Date()).getTime()/1000; // after {remoteSort:false} is set, sortchange event will be fired twice when column header is clicked, so I had to set a parameter for time record if('undefined' == typeof(this.last_sort_time) || this.last_sort_time+1 < time){ this.getStore().loadPage(1); this.last_sort_time = time; } }, scope:this}" 

in the grid. But this does not work fine, because the received data was reordered by the grid before displaying on it

---

Finally, I solve the problem as follows:

 Ext.override(Ext.grid.column.Column, { doSort:function(){ var ds = this.up('tablepanel').store; ds.currentPage = 1; this.callParent(arguments); } }); 

And it works fine so far

Answer 5

sortchange events fire after a request is sent to the server. For a solution, see here http://www.sencha.com/forum/showthread.php?145779-Reset-page-for-paginator-on-sort-change