6

いくつかのカスタム列を含む ext にグリッドがあり、この列をソートできるようにしたい - 内部に表示されているものでソートしたいのですが、列のソーターを定義する方法がわかりませんそれは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
},
4

3 に答える 3

4

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);
                    }
                });
            }
        }
    ]
   //....  
});
于 2013-07-22T19:14:40.823 に答える
3

Ext JS バージョン 5 の場合、削除されたように見えるdoSortため、オーバーライドできませんでした。sortchange代わりに、イベントを聞くルートに進み、そこからExt.data.Store.setSortersメソッドを使用しました。私が使用しているデータのために、コードは少しカスタムであり、非常に複雑です。

// 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
    }]);
  }
}
于 2015-07-10T01:09:27.473 に答える
2

Ext.data.Model クラスには、使用前にデータを変換できる convert メソッドがあります。次に、この「dataIndex」を列に指定して、通常の並べ替えを実行できます。列はその変換された値でソートされます。以下は、1 つのフィールド (親) とそれに対応する変換を含むサンプル モデルです。

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;
        }
    }
});
于 2013-07-22T19:16:40.623 に答える