Ext js sắp xếp cột tùy chỉnh theo nội dung

Question

Tôi có một lưới mở rộng với một số cột tùy chỉnh và tôi muốn có thể sắp xếp cột này - Tôi muốn sắp xếp theo thứ được hiển thị bên trong, nhưng thực sự tôi không thể tìm ra cách để xác định một bộ sắp xếp cho một cột sẽ không dựa trên dataIndex - Tôi đã thử sử dụng một mô hình tùy chỉnh, nhưng tôi không thể làm điều đó để làm việc.

{ 
    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

Bạn sẽ có thể ghi đè phương pháp doSort của cột. Đây là ý chính của nó. Tôi cũng tạo ra một fiddle làm việc (http://jsfiddle.net/cfarmerga/LG5uA/). Fiddle sử dụng độ dài chuỗi của một trường làm thuộc tính để sắp xếp, nhưng tất nhiên bạn có thể áp dụng logic sắp xếp tùy chỉnh của riêng bạn.

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

Có phương thức chuyển đổi trên lớp Ext.data.Model cho phép bạn chuyển đổi dữ liệu trước khi sử dụng. Sau đó, bạn chỉ có thể chỉ định 'dataIndex' này trong cột của bạn và thực hiện sắp xếp bình thường. Cột sẽ được sắp xếp theo giá trị được chuyển đổi đó. Đây là một mô hình mẫu chỉ với một lĩnh vực (mẹ) và với nó chuyển đổi tương ứng:

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

Đối Ext JS phiên bản 5, có vẻ như doSort đã được đưa ra, vì vậy tôi không thể ghi đè lên đó. Thay vào đó, tôi đã đi theo con đường lắng nghe sự kiện sortchange và từ đó, tôi đã sử dụng phương thức Ext.data.Store.setSorters. Mã này là một phong tục bit, và quá phức tạp vì các dữ liệu mà tôi đang sử dụng, vì vậy giữ cho rằng trong tâm trí (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 
    }]); 
    } 
}