ExtJS 5：自定义列排序
Posted
技术标签:
【中文标题】ExtJS 5：自定义列排序【英文标题】：ExtJS 5: Custom column sort 【发布时间】：2015-08-18 17:02:58 【问题描述】：我有一个包含一些复杂数据的网格（基本上，单元格是“3D”）。我使用渲染器填充每个单元格，因为实际数据隐藏在hasMany 关系中。通过了解行和列，我可以访问该行的关系存储，并根据列索引获取我的数据。因为我的网格数据中存在这种关系，这使得排序变得非常困难，并且使用sortType 不是我可以使用的东西，或者至少我还没有弄清楚如何使用它。
我想出了一个解决方案，但它似乎无法在 Internet Explorer 中运行/引发错误。我的解决方案在网格上侦听sortchange 事件，检查单击的列是否是我的唯一列之一，根据方向创建排序函数，然后使用setSorters 实际进行排序。
在我尝试输出排序函数传入的记录之前，IE 中没有抛出错误。我得到的错误是 Ext.data.Model#persistenceProperty" is deprecated... 在 Chrome 和 Firefox 中，console.log 输出适当的记录，所以我很困惑为什么 IE 会这样做......这不像我在做任何疯狂的事情。
我已经在Sencha forums 上报告了这个问题，但是它从一个错误变成了一个正常的问题，这让我相信我可能会以错误的方式解决这个问题。我确实知道this thread，但doSort 不再是ExtJS 5 中的方法。
是否有人对如何在所有浏览器中完成此操作有任何指导？我所做的是否合法/这真的是一个错误吗？这是我的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');
);
【问题讨论】：
【参考方案1】：在 Sencha Forums 上的 Joel Watson 的帮助下，他能够找出我的问题...我从 sorterFn 返回了错误的值。根据文档：
要执行的特定排序器功能。可以传递而不是属性。此函数应比较两个传递的参数，返回 -1、0 或 1，具体取决于项目 1 是否应在项目 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
]);
【讨论】：
以上是关于ExtJS 5：自定义列排序的主要内容，如果未能解决你的问题，请参考以下文章