EXTでのレンダリング/変換値の並べ替えjs

Question

this listを合計列でソートしようとしています。残念ながら、そうはしません。

調査中、レンダリングされた値がソートされないことがわかりました。誰かがこれに回避策/解決策を与えることができますか？私はPHPを介してデータを送信するので、必要に応じて、まずそれを並べ替えることができます。

半分焼いたアイデアを含むすべてのヘルプは歓迎します。

FIDDLE

問題のコラム：

{ 
    text: 'Total', 
    flex: 1, 
    dataIndex: 'sum', 
    notDirty: true, 
    renderer: function (t, meta, record) { 
     var data = record.getData(); 
     var sum = 0; 
     sum += +data.r1 + +data.r2 + +data.r3 + +data.r4 + +data.r5 + +data.r6; 
     return sum; 
    } 
} 

Answer 1

あなたはfieldためconvert機能を使用することができます。

convert Readerが提供する値をモデルに格納されるオブジェクトに変換する関数。

あなたのコードを修正しました。ここで確認することができますfiddle。

//this function will calculate some all numeric columns 
function calculateSum(rec) { 
    var sum = 0; 
    sum += +rec.get('r1') + +rec.get('r2') + +rec.get('r3') + +rec.get('r4') + +rec.get('r5') + +rec.get('r6'); 
    return sum; 
} 
//Create store 
Ext.create('Ext.data.Store', { 
    storeId: 'demoStore', 
    fields: ['team', 'r1', 'r2', 'r3', 'r4', 'r5', 'r6', { 
     name: 'sum', 
     convert: function (v, rec) { 
      return calculateSum(rec); 
     } 
    }], 
    data: { 
     'items': [{ 
      team: 'Brookings 1', 
      r1: '0', 
      r2: '0', 
      r3: '0', 
      r4: '0', 
      r5: '6', 
      r6: '5' 
     }, { 
      team: 'Washington 1', 
      r1: '0', 
      r2: '0', 
      r3: '0', 
      r4: '0', 
      r5: '0', 
      r6: '0' 
     }, { 
      team: 'Sioux Valley 1', 
      r1: '0', 
      r2: '0', 
      r3: '0', 
      r4: '0', 
      r5: '0', 
      r6: '0' 
     }] 
    }, 
    proxy: { 
     type: 'memory', 
     reader: { 
      type: 'json', 
      root: 'items' 
     } 
    } 
}); 
//Common numberfield object 
var editor = { 
    xtype: 'numberfield', 
    minValue: 0, 
    listeners: { 
     change: function (cmp, newValue, oldValue) { 
      var gridColumn = this.up(), 
       dataIndex = gridColumn.editingPlugin.activeColumn.dataIndex, 
       selctedData = gridColumn.up('grid').getSelectionModel().getSelection()[0]; 
      gridColumn.cellTextValue = newValue; 
      selctedData.set(dataIndex, newValue); 
      selctedData.set('sum', calculateSum(selctedData)); 
     } 
    } 
}; 

//Create Grid 
Ext.create('Ext.grid.Panel', { 
    title: 'Total count sorting', 
    margin: 10, 
    store: Ext.data.StoreManager.lookup('demoStore'), 
    plugins: Ext.create('Ext.grid.plugin.CellEditing', { 
     clicksToEdit: 1 
    }), 
    columns: [{ 
     text: 'Team', 
     dataIndex: 'team', 
    }, { 
     text: 'Round 1', 
     flex: 1, 
     dataIndex: 'r1', 
     editor: editor 
    }, { 
     text: 'Round 2', 
     flex: 1, 
     dataIndex: 'r2', 
     editor: editor 
    }, { 
     text: 'Round 3', 
     flex: 1, 
     dataIndex: 'r3', 
     editor: editor 
    }, { 
     text: 'Round 4', 
     flex: 1, 
     dataIndex: 'r4', 
     editor: editor 
    }, { 
     text: 'Round 5', 
     flex: 1, 
     dataIndex: 'r5', 
     editor: editor 
    }, { 
     text: 'Round 6', 
     flex: 1, 
     dataIndex: 'r6', 
     editor: editor 
    }, { 
     text: 'Total', 
     flex: 1, 
     dataIndex: 'sum', 
     notDirty: true, 
     /* renderer: function (t, meta, record) { 
      var data = record.getData(); 
      var sum = 0; 
      sum += +data.r1 + +data.r2 + +data.r3 + +data.r4 + +data.r5 + +data.r6; 
      return sum; 
     }*/ 
    }], 
    dockedItems: [{ 
     xtype: 'toolbar', 
     items: [{ 
      xtype: 'button', 
      text: 'Save and Calculate', 
      handler: function (btn) { 
       /* var store = btn.up('grid').getStore(); 
       for (i = 0; i < store.getModifiedRecords().length; i++) { 
        console.log(i + ":"); 
        console.log(store.getModifiedRecords()[i]['data']); 
        postVals(store.getModifiedRecords()[i]['data']); // @TODO_DEVELOPER loop this! 
       }*/ 
      } 
     }, { 
      xtype: "label", 
      text: "|" 
     }, { 
      xtype: 'button', 
      text: 'Refresh Table', 
      handler: function() { 
       //refresh(); 
      } 
     }, { 
      xtype: 'label', 
      text: '<-- Click there to update the totals.' 
     }] 
    }], 
    height: 200, 
    renderTo: Ext.getBody() 
});