How to custom sort grid using two parameters? - extjs

Question

I want to make custom sorting for the grid so that the data/items which have negative id be always placed on top, and the rest should be sorted depending on the selected column (dataIndex)
I have tried to use sortFn in columns but don't know how to proceed. If I return the value then it won't affect sorting by name (in this example).
{
text: 'Name',
zwidth: 150,
autoSizeColumn: true,
sortable: true,
hideable: true,
dataIndex: 'name',
sorter: {
sorterFn: function (a, b) {
if (a.id < 0 || b.id < 0)
// how to put them in first two positons and rest sort by 'name'
}
}
}
The whole example could be found here in this fiddle.
https://fiddle.sencha.com/#view/editor&fiddle/3kqi
I am using ExtJS 6.

Answer 1

Based on the documentation, from the sorter function you need to return:
0 if a and b should be considered as same in terms of order,
1 if a should be after b,
-1 if a should be before b.
So you need to handle the different cases for example like this:
sorterFn: function (a, b) {
if (a.id < 0 && b.id > 0) {
return -1;
}
if (a.id > 0 && b.id < 0) {
return 1;
}
return a.data.name == b.data.name ? 0 : a.data.name > b.data.name ? 1 : -1;
}
This will result in the expected behaviour in your Fiddle if you click on the Name column. However, if you click again for descending sort, the negative ids will be at the end, and the positives at the beginning.
If you'd like to handle descending order differently, you can use this.getDirection() within the sorter function, the result is either ASC or DESC, and you can set up different logic based on this.