0
У меня есть сетка, содержащая некоторые сложные данные (в основном, ячейки «3D»). Я использую средство визуализации для заполнения каждой ячейки, потому что фактические данные затухают в отношении hasMany. Зная строку и столбец, я могу получить доступ к хранилищу отношений этой строки и захватить мои данные на основе индекса столбца. Поскольку в данных моей сетки есть это отношение, это делает сортировку очень сложной, и использование sortType не является чем-то, что я могу использовать, или, по крайней мере, я еще не понял, как его использовать.ExtJS 5: Пользовательский сортировка столбца
У меня есть решение, но, похоже, оно не работает/не выдает ошибку в 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
}
]
}
]
EDIT
Я могу сделать это с моделью отображения, но идея состоит в том, что мои данные будут иметь динамическое число столбцов (я знаю, что этот пример не показывает его, но идите с ним), поэтому это немного сложнее. Однако использование сопоставления существенно снижает количество раздувания кода. 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');
}
});