Ext js sorting custom column by contents

Question

I have a grid in ext with some custom columns, and I want to be able to sort this column - I want to sort it by what is displayed inside of it, but really I just cannot figu

Answer 1

For Ext JS version 5, it looks like doSort was taken out, so I couldn't override that. Instead, I went the route of listening to the sortchange event, and from there, I used the Ext.data.Store.setSorters method. The code is a bit custom, and overly complex because of the data that I'm using, so keep that in mind (Fiddle here):

// grid class
initComponent: function() {
  ...
  this.on('sortchange', this.onSortChange, this);
},

onSortChange: function(container, column, direction, eOpts) {
  // check for dayColumnIndex
  if (column && column.dayColumnIndex !== undefined) {
    this.sortColumnByIndex(column.dayColumnIndex, direction);
  }
},

sortColumnByIndex: function(columnIndex, direction) {
  var store = this.getStore();
  if (store) {
    var sorterFn = function(rec1, rec2) {
      var sortValue = false;
      if (rec1 && rec2) {
        var day1;
        var daysStore1 = rec1.getDaysStore();
        if (daysStore1) {
          day1 = daysStore1.getAt(columnIndex);
        }
        var day2;
        var daysStore2 = rec2.getDaysStore();
        if (daysStore2) {
          day2 = daysStore2.getAt(columnIndex);
        }
        if (day1 && day2) {
          var val1 = day1.get('value');
          var val2 = day2.get('value');
          sortValue = val1 > val2 ? 1 : val1 === val2 ? 0 : -1;
        }
      }
      return sortValue;
    };
    if (direction !== 'ASC') {
      sorterFn = function(rec1, rec2) {
        var sortValue = false;
        if (rec1 && rec2) {
          var day1;
          var daysStore1 = rec1.getDaysStore();
          if (daysStore1) {
            day1 = daysStore1.getAt(columnIndex);
          }
          var day2;
          var daysStore2 = rec2.getDaysStore();
          if (daysStore2) {
            day2 = daysStore2.getAt(columnIndex);
          }
          if (day1 && day2) {
            var val1 = day1.get('value');
            var val2 = day2.get('value');
            sortValue = val1 < val2 ? 1 : val1 === val2 ? 0 : -1;
          }
        }
        return sortValue;
      };
    }
    store.setSorters([{
      sorterFn: sorterFn
    }]);
  }
}