Custom sorter grid-column in Ext JS 5

Question

I have a Gridpanel where a column is set as combobox ... I load ID as the valueField and then in renderer I search the store with the ID and display the corresponding name as the displayField Like this -

view.renderer = function(value) {
        var store = view.getEditor().getStore(),
            record;

        if (value && store) {
            record = store.findRecord(view.valueField, value, 0, false, false, true);

            if (record) {
                return record.get(view.displayField);
            }
        }

        return value;
    };

When I click on sort Ascending/Sort Descending this column gets sorted by ID(valueField) .. I want it to get sorted by Name(displayField)

Answer 1

Add a custom sorter to your grid column, e.g.

sorter:function(o1, o2) {
    return ((o1.get(view.displayField)>o2.get(view.displayField)) ? 1 : -1);
}

Answer 2

I did the following:

I returned via the ajax the value: id-description and to show I formatted like the following with Ext.util.Format:

Ext.util.Format.detipolancamento = function(v)
{
  v = v.split("-"); 
  for (i = 0; i < todastipolancamento.length; i++) {
    desctipolancamento = todastipolancamento[i].toString(); 
    var tipolancamento = desctipolancamento.split( "," );
    if (v[0] == tipolancamento[0]) {
        return tipolancamento[1];
    }
  } 
};

where todastipolancamento is an array with the values of the combobox.

And I used in the column: formatter: 'detipolancamento',

then in Model -> fields I put the custom sortType: {name: 'tipolancamento', sortType: 'asPerson2'},

and finally I used the asPerson2 for the sort to be done by the description and no ID, like this:

Ext.apply(Ext.data.SortTypes, {
  asPerson: function(person){
    return  person.toLowerCase();
  },
  asPerson2: function(person){
    var retorno = person.split('-');
    return  retorno[1].toLowerCase();
  }    
});