Ext js sortieren benutzerdefinierte Spalte nach Inhalt

Question

Ich habe ein Gitter in ext mit einigen benutzerdefinierten Spalten, und ich möchte in der Lage sein, diese Spalte zu sortieren - ich möchte es nach dem, was in ihm angezeigt wird, aber wirklich kann ich einfach nicht finde heraus, wie man einen Sortierer für eine Spalte definiert, die nicht auf dem dataIndex basiert - Ich habe versucht, ein benutzerdefiniertes Modell zu verwenden, aber ich konnte das nicht zum Laufen bringen.

{ 
    text: 'Parent', 
    dataIndex: 'Parent', 
    renderer: function(value, meta, record) { 
     var ret = record.raw.Parent; 
     if (ret) { 
      return ret.Name; 
     } else { 
      meta.tdCls = 'invisible'; 
      return record.data.Name; 
     } 
    }, 
    sortable: true 
}, 

Answer 1

Sie sollten in der Lage sein, die doSort Methode der Spalte zu überschreiben. Hier ist der Kern davon. Ich schuf auch eine Arbeitsgeige (http://jsfiddle.net/cfarmerga/LG5uA/). Die Fiddle verwendet die String-Länge eines Feldes als zu sortierende Eigenschaft, aber Sie können natürlich Ihre eigene Sortierlogik anwenden.

var grid = Ext.create('Ext.grid.Panel',{ 
    //... 
    columns: [ 
     { text: 'name', dataIndex: 'name', sortable: true }, 
     { 
      text: 'Custom', 
      sortable : true, 
      dataIndex: 'customsort', 
      doSort: function(state) { 
       var ds = this.up('grid').getStore(); 
       var field = this.getSortParam(); 
       ds.sort({ 
        property: field, 
        direction: state, 
        sorterFn: function(v1, v2){ 
         v1 = v1.get(field); 
         v2 = v2.get(field); 
         return v1.length > v2.length ? 1 : (v1.length < v2.length ? -1 : 0); 
        } 
       }); 
      } 
     } 
    ] 
    //.... 
}); 

Answer 2

Es ist eine Konvertit Methode auf der Ext.data.Model Klasse, die Sie die Daten zu konvertieren, bevor es verwendet wird. Dann können Sie einfach diesen 'dataIndex' in Ihrer Spalte angeben und eine normale Sortierung durchführen. Die Spalte wird nach diesem konvertierten Wert sortiert. Hier ist das ein Beispielmodell mit nur einem Feld (Parent) und es entspricht der Wandlungs-:

Ext.define('MyModel', { 
    extend: 'Ext.data.Model', 
    fields: [ 
     {name: 'Parent', type: 'string', convert: sortParent}, 
     // other fields... 
    ], 
    sortParent: function(value, record) { 
     var ret = record.raw.Parent; 
     if (ret) { 
      return ret.Name; 
     } else { 
      meta.tdCls = 'invisible'; 
      return record.data.Name; 
     } 
    } 
}); 

Answer 3

Für Ext JS-Version 5, es sieht aus wie doSort wurde herausgenommen, so dass ich konnte sie nicht außer Kraft setzen. Stattdessen ging ich die Route des Abhörens auf das sortchange Ereignis, und von dort verwendete ich die Ext.data.Store.setSorters Methode. Der Code ist ein bisschen Gewohnheit und zu komplex, weil die Daten, die ich verwende, so dass im Auge behalten (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 
    }]); 
    } 
}