的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.0版本，它看起來像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 
    }]); 
    } 
}