ExtJS 4 - Custom sort function executes only after clicking on columns header

Question

I think the title says everything. I have a grid, I have a store, I selected a field for sort. I've overridden the Ext.util.Sorters defaultSorterFn function. When the grid loads first, it sorts, but the function is not executing. When I click on the columns header, then the function is executing and it's sorting the way I would like. I guess maybe there is something with store but I'm not sure. Because the app is really big I copy only the store but if needed I could copy other parts of the code too.

Ext.define('MyApp.store.GetEmployees', {
    extend: 'Ext.data.Store',

    requires: [
        'Ext.data.proxy.Ajax',
        'Ext.data.reader.Json',
        'Ext.data.Field',
        'Ext.util.Sorter'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoLoad: false,
            storeId: 'GetEmployees',
            proxy: {
                type: 'ajax',
                url: 'Handlers/GridHandler.ashx?event=GetEmployees',
                reader: {
                    type: 'json',
                    root: 'data'
                }
            },
            fields: [
                {
                    name: 'StaffId',
                    type: 'int'
                },
                {
                    name: 'EmployeeName'
                }
            ],
            sorters: {
                property: 'EmployeeName'
            }
        }, cfg)]);
    }
});

Any idea?

Answer 1

Ok, because there is no answer I write how I was able to solve it. I tried everything but the only working method was that on the end of the stores load event I sorted the store and now it works. Maybe it's not the best solution, but it works.