Grouping in store with values in extjs 6.2

Question

I am trying to group my store on department name . Department name contains some null values also . when i am trying grouping along with sort function its result in multiple group from same name.

see this fiddel for details. I am not getting what i am doing wrong. Kindly advise.

Answer 1

Your sorterFn is wrong.

The sorterFn has to return three different values:

• 1 if the second argument is strictly greater than the first.
• -1 if the second argument is strictly smaller than the first.
• 0 if both arguments are the same group.

Your sorterFn never returns 0. Try this one:

sorterFn: function(a, b) {
    if(a.get('department')=="Management" && b.get('department')=="Management") return 0;
    if(a.get('department')=="Management") return 1;
    if(b.get('department')=="Management") return -1;
    if(a.get('department') < b.get('department')) return 1;
    if(a.get('department') > b.get('department')) return -1;
    return 0;
},

Furthermore, your transform function is useless. It is called only from the original sorterFn, which you overwrite. You would have to account for null values in your sorterFn, if you wish so. (However, usually one would put fallback categories like "Others" in the end, not between "IT" and "Sales".)

Also, to write the department in the header line, you have to override the groupHeaderTpl template, e.g.

groupHeaderTpl: [
    '<tpl if=\'name\'>{name}<tpl else>Others</tpl>'
]