Ext.data.store: Custom sorter-function for specific column gets removed

[suamikim]

Hi there,

i'm trying to apply a custom sorter-function to only one column of my store. The other columns should use the default sorter-function.
The sorter-function is working as it should, but as soon as i call the sort-method of another column, the custom sorter-function is removed from the store (undefined):

Ext.onReady(function() {
    var store = Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        fields: ['name', 'email', 'phone'],
        data: {'items':[
            { 'name': 'Lisa',  'email': 'lisa@c.com' },
            { 'name': 'Bart',  'email': 'bart@a.com' },
            { 'name': 'Homer', 'email': 'home@d.com' },
            { 'name': 'Marge', 'email': 'marge@b.com' }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        },
        sorters: [{
            property: 'email',
            sorterFn: function(o1, o2) {
                var val1 = o1.data.email.slice(o1.data.email.indexOf('@') + 1, o1.data.email.length),
                    val2 = o2.data.email.slice(o2.data.email.indexOf('@') + 1, o2.data.email.length);
                    
                if (val1 === val2) {
                    return 0;
                } else {
                    return (val1 < val2) ? 1 : -1;
                }
            }
        }]
    });
    
    var grid = Ext.create('Ext.grid.Panel', {
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { header: 'Name',  dataIndex: 'name' },
            { header: 'Email', dataIndex: 'email', flex: 1 }
        ],
        hideHeaders: true
    });
    
    Ext.create('Ext.window.Window', {
        width: 350,
        height: 200,
        layout: "fit",
        items: grid,
        buttons: [{
                text: 'Sort name',
                handler: function() {
                    console.log('store.sorters.items[0].sorterFn: ', store.sorters.items[0].sorterFn);
                    store.sort('name');
                    console.log('store.sorters.items[0].sorterFn: ', store.sorters.items[0].sorterFn);
                }
            },{
                text: 'Sort email',
                handler: function() {
                    store.sort('email');
                }
        }]
    }).show();
});

If you execute this code and only click the "Sort email" button everything is working as expected (the email-column is sorted by the domain, not the whole e-mail-adress).
After the "Sort name" button has been clicked, the custom sorter is undefined and the e-mail column gets sorted by it's default sorter-function (whole email-adress, not only by the domain anymore).

I hope someone can help me out with this problem!

Thanks,

mik

[Tim Toady]

Instead of putting a sorter on the store, it may be easier to put a sortType on your field that just returns the domain.

http://docs.sencha.com/ext-js/4-1/#!...d-cfg-sortType

[suamikim]

Sorting by domain is just an example for this thread. Actually I do sort some other data which i can't do with the sortType in a reasonable way.

But it's good to know the sortType for the future. I wasn't aware of this config-option until now, so thanks anyway!