PDA

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



suamikim
29 May 2012, 4:01 AM
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': '[email protected]' },
{ 'name': 'Bart', 'email': '[email protected]' },
{ 'name': 'Homer', 'email': '[email protected]' },
{ 'name': 'Marge', 'email': '[email protected]' }
]},
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
29 May 2012, 6:19 AM
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/#!/api/Ext.data.Field-cfg-sortType

suamikim
29 May 2012, 7:15 AM
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!