Ext js sortowanie kolumny niestandardowej według zawartości

Question

Mam siatkę w ext z pewnymi niestandardowymi kolumnami i chcę mieć możliwość sortowania tej kolumny - chcę ją posortować według tego, co jest w niej wyświetlane, ale tak naprawdę po prostu nie mogę dowiedzieć się, jak zdefiniować sorter dla kolumny, która nie będzie oparta na dataIndex - próbowałem użyć niestandardowego modelu, ale nie mogłem tego zrobić.

{ 
    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

Powinieneś być w stanie zastąpić metodę doSort kolumny. Oto sedno tego. Stworzyłem także działające skrzypce (http://jsfiddle.net/cfarmerga/LG5uA/). Skrzypce używa długości ciągu pola jako właściwości do sortowania, ale oczywiście można zastosować własną niestandardową logikę sortowania.

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

Istnieje metoda konwersji w klasie Ext.data.Model, która umożliwia konwertowanie danych przed ich użyciem. Następnie możesz po prostu określić ten "dataIndex" w swojej kolumnie i zrobić zwykły sort. Kolumna zostanie posortowana według tej skonwertowanej wartości. Oto przykładowy model z tylko jednym polu (jednostka dominująca) i to odpowiada konwersji:

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

Dla Ext JS wersji 5, wygląda doSort wyjęto, więc nie mogła przesłonić tego. Zamiast tego poszedłem na trasę słuchania zdarzenia sortchange, a następnie skorzystałem z metody Ext.data.Store.setSorters. Kod jest zwyczaj nieco, i zbyt skomplikowane ze względu na dane, które używam, więc miej to na uwadze (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 
    }]); 
    } 
}