ExtJS 5：自定义列排序
ExtJS 5: Custom column sort
我有一个包含一些复杂数据的网格（基本上，单元格是“3D”的）。我使用渲染器填充每个单元格，因为实际数据隐藏在 hasMany 关系中。通过了解行和列，我可以访问该行的关系存储，并根据列索引获取我的数据。由于我的网格数据中存在这种关系，因此排序非常困难，并且使用 sortType 不是我可以使用的东西，或者至少，我还没有弄清楚如何使用它。
我想出了一个解决办法，但似乎 work/throw Internet Explorer 中没有错误。我的解决方案侦听网格上的 sortchange 事件，检查单击的列是否是我的唯一列之一，根据方向创建排序函数，然后使用 setSorters 实际执行排序。
在我尝试输出排序函数传入的记录之前，IE 没有抛出任何错误。我得到的错误是 Ext.data.Model#persistenceProperty" is deprecated... 在 Chrome 和 Firefox 中，console.log 输出适当的记录，所以我很困惑为什么 IE 会这样做...这不像我正在做任何疯狂的事情。
我已经在 Sencha forums, but it was changed from a bug to a normal question, which leads me to believe that I might be going about this the wrong way. I do know about this thread 上报告了这个问题，但是 doSort 不再是 ExtJS 5 中的方法。
有没有人对如何在所有浏览器中完成此操作有任何指导？我正在做的 legal/is 这真的是一个错误吗？这是我的 example 和代码：
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('DayModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'day',
type: 'string'
}, {
name: 'value',
type: 'number'
}]
});
Ext.define('WeekModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'week',
type: 'string'
}],
hasMany: [{
associationKey: 'days',
name: 'getDaysStore',
model: 'DayModel'
}]
});
Ext.define('MyStore', {
extend: 'Ext.data.Store',
model: 'WeekModel',
proxy: {
type: 'ajax',
url: 'data1.json'
}
});
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
renderTo: Ext.getBody(),
initComponent: function() {
this.callParent();
this.on('sortchange', this.onSortChange, this);
var store = Ext.create('MyStore');
if (store) {
store.on('load', this.onStoreLoad, this);
this.setStore(store);
store.load();
}
},
dayColumnRenderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
if (record) {
var daysStore = record.getDaysStore();
if (daysStore) {
// subtract 1 because we have the Week column as the first column, so index is shifted by 1
var dayRecord = daysStore.getAt(colIndex - 1);
if (dayRecord) {
value = dayRecord.get('value');
}
}
}
return value;
},
sortColumnByIndex: function(columnIndex, direction) {
var store = this.getStore();
if (store) {
var sorterFn = function(rec1, rec2) {
var sortValue = false;
console.log(rec1, rec2);
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) {
sortValue = day1.get('value') > day2.get('value');
}
}
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) {
sortValue = day1.get('value') < day2.get('value');
}
}
return sortValue;
};
}
store.setSorters([{
sorterFn: sorterFn
}]);
}
},
onStoreLoad: function(store, records, successful, eOpts) {
// set columns
var columns = [{
text: 'Week',
dataIndex: 'week'
}];
if (records) {
var firstRecord = records[0];
if (firstRecord) {
var daysStore = firstRecord.getDaysStore();
if (daysStore) {
daysStore.each(function(dayRecord, dayColumnIndex) {
columns.push({
text: dayRecord.get('day'),
dataIndex: 'day' + dayColumnIndex,
dayColumnIndex: dayColumnIndex,
renderer: this.dayColumnRenderer
});
}, this);
}
}
}
this.reconfigure(null, columns);
},
onSortChange: function(container, column, direction, eOpts) {
// check for weekColumnIndex
if (column && column.dayColumnIndex !== undefined) {
this.sortColumnByIndex(column.dayColumnIndex, direction);
}
}
});
Ext.create('MyGrid');
}
});
data1.json
[
{
"week": "8\/27\/2014",
"days": [
{
"day": "Monday",
"value": 821.13
},
{
"day": "Tuesday",
"value": 244.45
},
{
"day": "Wednesday",
"value": 664.59
},
{
"day": "Thursday",
"value": 572.49
},
{
"day": "Friday",
"value": 100.96
}
]
},
{
"week": "5\/3\/2015",
"days": [
{
"day": "Monday",
"value": 885.49
},
{
"day": "Tuesday",
"value": 417.41
},
{
"day": "Wednesday",
"value": 419.62
},
{
"day": "Thursday",
"value": 512.05
},
{
"day": "Friday",
"value": 441.35
}
]
},
{
"week": "9\/2\/2014",
"days": [
{
"day": "Monday",
"value": 385.65
},
{
"day": "Tuesday",
"value": 446.5
},
{
"day": "Wednesday",
"value": 475.39
},
{
"day": "Thursday",
"value": 821.32
},
{
"day": "Friday",
"value": 700.17
}
]
},
{
"week": "11\/6\/2014",
"days": [
{
"day": "Monday",
"value": 55.76
},
{
"day": "Tuesday",
"value": 275.73
},
{
"day": "Wednesday",
"value": 321.79
},
{
"day": "Thursday",
"value": 589.53
},
{
"day": "Friday",
"value": 986.44
}
]
},
{
"week": "5\/16\/2015",
"days": [
{
"day": "Monday",
"value": 212.09
},
{
"day": "Tuesday",
"value": 587.13
},
{
"day": "Wednesday",
"value": 530.96
},
{
"day": "Thursday",
"value": 511.06
},
{
"day": "Friday",
"value": 154.04
}
]
},
{
"week": "4\/25\/2014",
"days": [
{
"day": "Monday",
"value": 905.84
},
{
"day": "Tuesday",
"value": 792.99
},
{
"day": "Wednesday",
"value": 283.89
},
{
"day": "Thursday",
"value": 10.06
},
{
"day": "Friday",
"value": 855.79
}
]
},
{
"week": "10\/3\/2014",
"days": [
{
"day": "Monday",
"value": 554.08
},
{
"day": "Tuesday",
"value": 32.82
},
{
"day": "Wednesday",
"value": 767.86
},
{
"day": "Thursday",
"value": 455.03
},
{
"day": "Friday",
"value": 91.45
}
]
},
{
"week": "4\/20\/2014",
"days": [
{
"day": "Monday",
"value": 986.91
},
{
"day": "Tuesday",
"value": 461.16
},
{
"day": "Wednesday",
"value": 111.98
},
{
"day": "Thursday",
"value": 402.46
},
{
"day": "Friday",
"value": 901.53
}
]
},
{
"week": "5\/11\/2014",
"days": [
{
"day": "Monday",
"value": 333.73
},
{
"day": "Tuesday",
"value": 199.59
},
{
"day": "Wednesday",
"value": 262.88
},
{
"day": "Thursday",
"value": 572.45
},
{
"day": "Friday",
"value": 107.91
}
]
},
{
"week": "6\/21\/2015",
"days": [
{
"day": "Monday",
"value": 918.2
},
{
"day": "Tuesday",
"value": 560.97
},
{
"day": "Wednesday",
"value": 366.1
},
{
"day": "Thursday",
"value": 984.78
},
{
"day": "Friday",
"value": 992.21
}
]
},
{
"week": "6\/27\/2015",
"days": [
{
"day": "Monday",
"value": 386.41
},
{
"day": "Tuesday",
"value": 640.2
},
{
"day": "Wednesday",
"value": 48.1
},
{
"day": "Thursday",
"value": 306.6
},
{
"day": "Friday",
"value": 855.79
}
]
},
{
"week": "3\/6\/2015",
"days": [
{
"day": "Monday",
"value": 856.98
},
{
"day": "Tuesday",
"value": 747.94
},
{
"day": "Wednesday",
"value": 638.24
},
{
"day": "Thursday",
"value": 341.54
},
{
"day": "Friday",
"value": 792.7
}
]
},
{
"week": "10\/16\/2014",
"days": [
{
"day": "Monday",
"value": 999.63
},
{
"day": "Tuesday",
"value": 586.11
},
{
"day": "Wednesday",
"value": 626.51
},
{
"day": "Thursday",
"value": 39.03
},
{
"day": "Friday",
"value": 524.8
}
]
},
{
"week": "2\/4\/2015",
"days": [
{
"day": "Monday",
"value": 662.25
},
{
"day": "Tuesday",
"value": 943.43
},
{
"day": "Wednesday",
"value": 926.43
},
{
"day": "Thursday",
"value": 89.6
},
{
"day": "Friday",
"value": 442.88
}
]
},
{
"week": "11\/18\/2014",
"days": [
{
"day": "Monday",
"value": 118.1
},
{
"day": "Tuesday",
"value": 218.62
},
{
"day": "Wednesday",
"value": 639.59
},
{
"day": "Thursday",
"value": 426.43
},
{
"day": "Friday",
"value": 645.38
}
]
},
{
"week": "12\/24\/2014",
"days": [
{
"day": "Monday",
"value": 798.07
},
{
"day": "Tuesday",
"value": 373.61
},
{
"day": "Wednesday",
"value": 479.74
},
{
"day": "Thursday",
"value": 732.26
},
{
"day": "Friday",
"value": 85.73
}
]
},
{
"week": "4\/11\/2014",
"days": [
{
"day": "Monday",
"value": 365.01
},
{
"day": "Tuesday",
"value": 35.47
},
{
"day": "Wednesday",
"value": 894.57
},
{
"day": "Thursday",
"value": 521.17
},
{
"day": "Friday",
"value": 477.67
}
]
},
{
"week": "12\/21\/2014",
"days": [
{
"day": "Monday",
"value": 113.72
},
{
"day": "Tuesday",
"value": 218.71
},
{
"day": "Wednesday",
"value": 672.37
},
{
"day": "Thursday",
"value": 3.09
},
{
"day": "Friday",
"value": 179.24
}
]
},
{
"week": "7\/30\/2014",
"days": [
{
"day": "Monday",
"value": 40.6
},
{
"day": "Tuesday",
"value": 644.09
},
{
"day": "Wednesday",
"value": 211.88
},
{
"day": "Thursday",
"value": 109.62
},
{
"day": "Friday",
"value": 199.69
}
]
},
{
"week": "3\/11\/2015",
"days": [
{
"day": "Monday",
"value": 617.25
},
{
"day": "Tuesday",
"value": 720.71
},
{
"day": "Wednesday",
"value": 117.68
},
{
"day": "Thursday",
"value": 625.6
},
{
"day": "Friday",
"value": 733.51
}
]
}
]
编辑
我可以用模型映射来完成这个，但我的想法是我的数据将有一个动态的列数（我知道这个例子没有显示，但是随它去吧），所以这有点更加困难。然而，使用映射确实大大减少了代码膨胀的数量。 Example 和代码：
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('DayModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'day',
type: 'string'
}, {
name: 'value',
type: 'number'
}]
});
Ext.define('WeekModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'week',
type: 'string'
}, {
name: 'day0',
type: 'number',
mapping: 'days[0].value'
}, {
name: 'day1',
type: 'number',
mapping: 'days[1].value'
}, {
name: 'day2',
type: 'number',
mapping: 'days[2].value'
}, {
name: 'day3',
type: 'number',
mapping: 'days[3].value'
}, {
name: 'day4',
type: 'number',
mapping: 'days[4].value'
}],
hasMany: [{
associationKey: 'days',
name: 'getDaysStore',
model: 'DayModel'
}]
});
Ext.define('MyStore', {
extend: 'Ext.data.Store',
model: 'WeekModel',
proxy: {
type: 'ajax',
url: 'data1.json'
}
});
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
renderTo: Ext.getBody(),
initComponent: function() {
this.callParent();
var store = Ext.create('MyStore');
if (store) {
store.on('load', this.onStoreLoad, this);
this.setStore(store);
store.load();
}
},
onStoreLoad: function(store, records, successful, eOpts) {
// set columns
var columns = [{
text: 'Week',
dataIndex: 'week'
}];
if (records) {
var firstRecord = records[0];
if (firstRecord) {
var daysStore = firstRecord.getDaysStore();
if (daysStore) {
daysStore.each(function(dayRecord, dayColumnIndex) {
columns.push({
text: dayRecord.get('day'),
dataIndex: 'day' + dayColumnIndex,
dayColumnIndex: dayColumnIndex
});
}, this);
}
}
}
this.reconfigure(null, columns);
}
});
Ext.create('MyGrid');
}
});
在 Joel Watson 的帮助下 Sencha Forums, he was able to figure out my issue... I was returning the wrong values from the sorterFn。根据文档：
A specific sorter function to execute. Can be passed instead of property. This function should compare the two passed arguments, returning -1, 0 or 1 depending on if item 1 should be sorted before, at the same level, or after item 2.
所以我更新的代码转到：
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');
// this is the key to it all
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');
// this is the key to it all
sortValue = val1 < val2 ? 1 : val1 === val2 ? 0 : -1;
}
}
return sortValue;
};
}
store.setSorters([{
sorterFn: sorterFn
}]);
我有一个包含一些复杂数据的网格（基本上，单元格是“3D”的）。我使用渲染器填充每个单元格，因为实际数据隐藏在 hasMany 关系中。通过了解行和列，我可以访问该行的关系存储，并根据列索引获取我的数据。由于我的网格数据中存在这种关系，因此排序非常困难，并且使用 sortType 不是我可以使用的东西，或者至少，我还没有弄清楚如何使用它。
我想出了一个解决办法，但似乎 work/throw Internet Explorer 中没有错误。我的解决方案侦听网格上的 sortchange 事件，检查单击的列是否是我的唯一列之一，根据方向创建排序函数，然后使用 setSorters 实际执行排序。
在我尝试输出排序函数传入的记录之前，IE 没有抛出任何错误。我得到的错误是 Ext.data.Model#persistenceProperty" is deprecated... 在 Chrome 和 Firefox 中，console.log 输出适当的记录，所以我很困惑为什么 IE 会这样做...这不像我正在做任何疯狂的事情。
我已经在 Sencha forums, but it was changed from a bug to a normal question, which leads me to believe that I might be going about this the wrong way. I do know about this thread 上报告了这个问题，但是 doSort 不再是 ExtJS 5 中的方法。
有没有人对如何在所有浏览器中完成此操作有任何指导？我正在做的 legal/is 这真的是一个错误吗？这是我的 example 和代码：
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('DayModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'day',
type: 'string'
}, {
name: 'value',
type: 'number'
}]
});
Ext.define('WeekModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'week',
type: 'string'
}],
hasMany: [{
associationKey: 'days',
name: 'getDaysStore',
model: 'DayModel'
}]
});
Ext.define('MyStore', {
extend: 'Ext.data.Store',
model: 'WeekModel',
proxy: {
type: 'ajax',
url: 'data1.json'
}
});
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
renderTo: Ext.getBody(),
initComponent: function() {
this.callParent();
this.on('sortchange', this.onSortChange, this);
var store = Ext.create('MyStore');
if (store) {
store.on('load', this.onStoreLoad, this);
this.setStore(store);
store.load();
}
},
dayColumnRenderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
if (record) {
var daysStore = record.getDaysStore();
if (daysStore) {
// subtract 1 because we have the Week column as the first column, so index is shifted by 1
var dayRecord = daysStore.getAt(colIndex - 1);
if (dayRecord) {
value = dayRecord.get('value');
}
}
}
return value;
},
sortColumnByIndex: function(columnIndex, direction) {
var store = this.getStore();
if (store) {
var sorterFn = function(rec1, rec2) {
var sortValue = false;
console.log(rec1, rec2);
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) {
sortValue = day1.get('value') > day2.get('value');
}
}
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) {
sortValue = day1.get('value') < day2.get('value');
}
}
return sortValue;
};
}
store.setSorters([{
sorterFn: sorterFn
}]);
}
},
onStoreLoad: function(store, records, successful, eOpts) {
// set columns
var columns = [{
text: 'Week',
dataIndex: 'week'
}];
if (records) {
var firstRecord = records[0];
if (firstRecord) {
var daysStore = firstRecord.getDaysStore();
if (daysStore) {
daysStore.each(function(dayRecord, dayColumnIndex) {
columns.push({
text: dayRecord.get('day'),
dataIndex: 'day' + dayColumnIndex,
dayColumnIndex: dayColumnIndex,
renderer: this.dayColumnRenderer
});
}, this);
}
}
}
this.reconfigure(null, columns);
},
onSortChange: function(container, column, direction, eOpts) {
// check for weekColumnIndex
if (column && column.dayColumnIndex !== undefined) {
this.sortColumnByIndex(column.dayColumnIndex, direction);
}
}
});
Ext.create('MyGrid');
}
});
data1.json
[
{
"week": "8\/27\/2014",
"days": [
{
"day": "Monday",
"value": 821.13
},
{
"day": "Tuesday",
"value": 244.45
},
{
"day": "Wednesday",
"value": 664.59
},
{
"day": "Thursday",
"value": 572.49
},
{
"day": "Friday",
"value": 100.96
}
]
},
{
"week": "5\/3\/2015",
"days": [
{
"day": "Monday",
"value": 885.49
},
{
"day": "Tuesday",
"value": 417.41
},
{
"day": "Wednesday",
"value": 419.62
},
{
"day": "Thursday",
"value": 512.05
},
{
"day": "Friday",
"value": 441.35
}
]
},
{
"week": "9\/2\/2014",
"days": [
{
"day": "Monday",
"value": 385.65
},
{
"day": "Tuesday",
"value": 446.5
},
{
"day": "Wednesday",
"value": 475.39
},
{
"day": "Thursday",
"value": 821.32
},
{
"day": "Friday",
"value": 700.17
}
]
},
{
"week": "11\/6\/2014",
"days": [
{
"day": "Monday",
"value": 55.76
},
{
"day": "Tuesday",
"value": 275.73
},
{
"day": "Wednesday",
"value": 321.79
},
{
"day": "Thursday",
"value": 589.53
},
{
"day": "Friday",
"value": 986.44
}
]
},
{
"week": "5\/16\/2015",
"days": [
{
"day": "Monday",
"value": 212.09
},
{
"day": "Tuesday",
"value": 587.13
},
{
"day": "Wednesday",
"value": 530.96
},
{
"day": "Thursday",
"value": 511.06
},
{
"day": "Friday",
"value": 154.04
}
]
},
{
"week": "4\/25\/2014",
"days": [
{
"day": "Monday",
"value": 905.84
},
{
"day": "Tuesday",
"value": 792.99
},
{
"day": "Wednesday",
"value": 283.89
},
{
"day": "Thursday",
"value": 10.06
},
{
"day": "Friday",
"value": 855.79
}
]
},
{
"week": "10\/3\/2014",
"days": [
{
"day": "Monday",
"value": 554.08
},
{
"day": "Tuesday",
"value": 32.82
},
{
"day": "Wednesday",
"value": 767.86
},
{
"day": "Thursday",
"value": 455.03
},
{
"day": "Friday",
"value": 91.45
}
]
},
{
"week": "4\/20\/2014",
"days": [
{
"day": "Monday",
"value": 986.91
},
{
"day": "Tuesday",
"value": 461.16
},
{
"day": "Wednesday",
"value": 111.98
},
{
"day": "Thursday",
"value": 402.46
},
{
"day": "Friday",
"value": 901.53
}
]
},
{
"week": "5\/11\/2014",
"days": [
{
"day": "Monday",
"value": 333.73
},
{
"day": "Tuesday",
"value": 199.59
},
{
"day": "Wednesday",
"value": 262.88
},
{
"day": "Thursday",
"value": 572.45
},
{
"day": "Friday",
"value": 107.91
}
]
},
{
"week": "6\/21\/2015",
"days": [
{
"day": "Monday",
"value": 918.2
},
{
"day": "Tuesday",
"value": 560.97
},
{
"day": "Wednesday",
"value": 366.1
},
{
"day": "Thursday",
"value": 984.78
},
{
"day": "Friday",
"value": 992.21
}
]
},
{
"week": "6\/27\/2015",
"days": [
{
"day": "Monday",
"value": 386.41
},
{
"day": "Tuesday",
"value": 640.2
},
{
"day": "Wednesday",
"value": 48.1
},
{
"day": "Thursday",
"value": 306.6
},
{
"day": "Friday",
"value": 855.79
}
]
},
{
"week": "3\/6\/2015",
"days": [
{
"day": "Monday",
"value": 856.98
},
{
"day": "Tuesday",
"value": 747.94
},
{
"day": "Wednesday",
"value": 638.24
},
{
"day": "Thursday",
"value": 341.54
},
{
"day": "Friday",
"value": 792.7
}
]
},
{
"week": "10\/16\/2014",
"days": [
{
"day": "Monday",
"value": 999.63
},
{
"day": "Tuesday",
"value": 586.11
},
{
"day": "Wednesday",
"value": 626.51
},
{
"day": "Thursday",
"value": 39.03
},
{
"day": "Friday",
"value": 524.8
}
]
},
{
"week": "2\/4\/2015",
"days": [
{
"day": "Monday",
"value": 662.25
},
{
"day": "Tuesday",
"value": 943.43
},
{
"day": "Wednesday",
"value": 926.43
},
{
"day": "Thursday",
"value": 89.6
},
{
"day": "Friday",
"value": 442.88
}
]
},
{
"week": "11\/18\/2014",
"days": [
{
"day": "Monday",
"value": 118.1
},
{
"day": "Tuesday",
"value": 218.62
},
{
"day": "Wednesday",
"value": 639.59
},
{
"day": "Thursday",
"value": 426.43
},
{
"day": "Friday",
"value": 645.38
}
]
},
{
"week": "12\/24\/2014",
"days": [
{
"day": "Monday",
"value": 798.07
},
{
"day": "Tuesday",
"value": 373.61
},
{
"day": "Wednesday",
"value": 479.74
},
{
"day": "Thursday",
"value": 732.26
},
{
"day": "Friday",
"value": 85.73
}
]
},
{
"week": "4\/11\/2014",
"days": [
{
"day": "Monday",
"value": 365.01
},
{
"day": "Tuesday",
"value": 35.47
},
{
"day": "Wednesday",
"value": 894.57
},
{
"day": "Thursday",
"value": 521.17
},
{
"day": "Friday",
"value": 477.67
}
]
},
{
"week": "12\/21\/2014",
"days": [
{
"day": "Monday",
"value": 113.72
},
{
"day": "Tuesday",
"value": 218.71
},
{
"day": "Wednesday",
"value": 672.37
},
{
"day": "Thursday",
"value": 3.09
},
{
"day": "Friday",
"value": 179.24
}
]
},
{
"week": "7\/30\/2014",
"days": [
{
"day": "Monday",
"value": 40.6
},
{
"day": "Tuesday",
"value": 644.09
},
{
"day": "Wednesday",
"value": 211.88
},
{
"day": "Thursday",
"value": 109.62
},
{
"day": "Friday",
"value": 199.69
}
]
},
{
"week": "3\/11\/2015",
"days": [
{
"day": "Monday",
"value": 617.25
},
{
"day": "Tuesday",
"value": 720.71
},
{
"day": "Wednesday",
"value": 117.68
},
{
"day": "Thursday",
"value": 625.6
},
{
"day": "Friday",
"value": 733.51
}
]
}
]
编辑
我可以用模型映射来完成这个，但我的想法是我的数据将有一个动态的列数（我知道这个例子没有显示，但是随它去吧），所以这有点更加困难。然而，使用映射确实大大减少了代码膨胀的数量。 Example 和代码：
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('DayModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'day',
type: 'string'
}, {
name: 'value',
type: 'number'
}]
});
Ext.define('WeekModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'week',
type: 'string'
}, {
name: 'day0',
type: 'number',
mapping: 'days[0].value'
}, {
name: 'day1',
type: 'number',
mapping: 'days[1].value'
}, {
name: 'day2',
type: 'number',
mapping: 'days[2].value'
}, {
name: 'day3',
type: 'number',
mapping: 'days[3].value'
}, {
name: 'day4',
type: 'number',
mapping: 'days[4].value'
}],
hasMany: [{
associationKey: 'days',
name: 'getDaysStore',
model: 'DayModel'
}]
});
Ext.define('MyStore', {
extend: 'Ext.data.Store',
model: 'WeekModel',
proxy: {
type: 'ajax',
url: 'data1.json'
}
});
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
renderTo: Ext.getBody(),
initComponent: function() {
this.callParent();
var store = Ext.create('MyStore');
if (store) {
store.on('load', this.onStoreLoad, this);
this.setStore(store);
store.load();
}
},
onStoreLoad: function(store, records, successful, eOpts) {
// set columns
var columns = [{
text: 'Week',
dataIndex: 'week'
}];
if (records) {
var firstRecord = records[0];
if (firstRecord) {
var daysStore = firstRecord.getDaysStore();
if (daysStore) {
daysStore.each(function(dayRecord, dayColumnIndex) {
columns.push({
text: dayRecord.get('day'),
dataIndex: 'day' + dayColumnIndex,
dayColumnIndex: dayColumnIndex
});
}, this);
}
}
}
this.reconfigure(null, columns);
}
});
Ext.create('MyGrid');
}
});
在 Joel Watson 的帮助下 Sencha Forums, he was able to figure out my issue... I was returning the wrong values from the sorterFn。根据文档：
A specific sorter function to execute. Can be passed instead of property. This function should compare the two passed arguments, returning -1, 0 or 1 depending on if item 1 should be sorted before, at the same level, or after item 2.
所以我更新的代码转到：
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');
// this is the key to it all
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');
// this is the key to it all
sortValue = val1 < val2 ? 1 : val1 === val2 ? 0 : -1;
}
}
return sortValue;
};
}
store.setSorters([{
sorterFn: sorterFn
}]);