Ext jsはカスタムカラムを内容別にソートする

Question

私はいくつかのカスタムカラムを持つグリッドを内包しています。このカラムをソートできるようにしたいのですが、その中に表示されているものでソートしたいのですが、 dataIndexに基づいていない列のソーターを定義する方法を理解する - カスタムモデルを使用しようとしましたが、動作させることができませんでした。

{ 
    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

カラムのdoSortメソッドをオーバーライドする必要があります。ここにそれの要点があります。私も働いているフィドル（http://jsfiddle.net/cfarmerga/LG5uA/）を作りました。フィドルは、フィールドの文字列の長さをソートするプロパティとして使用しますが、独自のカスタムソートロジックを適用することもできます。

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

それが使われている前にデータを変換することができますExt.data.Modelクラスに変換する方法があります。次に、この 'dataIndex'を列に指定し、通常のソートを実行するだけです。列はその変換された値でソートされます。ここではただ一つのフィールド（親）と、それは変換を対応だとサンプルモデルです：

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

のExt JSバージョン5の場合は、doSortを取り出したように見えますので、私はそれをオーバーライドすることができませんでした。代わりに、私はsortchangeイベントを聞くルートに行きました。そこから、私はExt.data.Store.setSortersメソッドを使用しました。コードので、私が使用しているデータのビットカスタム、および過度に複雑であるので、（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 
    }]); 
    } 
}