Question

I have an Extjs 4 grid with sort capability. i want to call a custum function after each time user presses sort button.

In my custom function i want to navigate to the first page of my grid (my grid uses pagination and it takes advantage of server-side sort) i think i must use store.loadPage(1) in my custom function (correct me if I’m 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 could use this:

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