У меня есть «сложные» данные - это означает, что в моих данных есть ассоциации - и я пытаюсь использовать эти ассоциации в своей сетке. Я создаю столбцы на основе некоторых данных, и поскольку данные вложены в массив, я устанавливаю средство визуализации для каждого столбца ... Я также устанавливаю редактор. Средство рендеринга работает отлично, но настройка значения редактора не работает, как я думал. Вот мой код (и Fiddle):ExtJS 5: Сложные данные сетки - значение столбца значения столбца
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.define('Phone', {
extend: 'Ext.data.Model',
fields: [
{name: 'phone', type: 'int'},
{name: 'type', type: 'string'}
]
});
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'}
],
hasMany: [
{associationKey: 'phones', model: 'Phone', name: 'getPhonesStore'}
]
});
var beforeEdit = function(editor, context, eOpts) {
var grid = context.grid;
var record = context.record;
if (grid && record) {
var phonesStore = record.getPhonesStore();
var columns = grid.columns;
if (columns && phonesStore) {
for (var i = 1; i < columns.length; i++) {
var column = columns[i];
if (column) {
var editor = column.getEditor();
if (editor) {
alert(phonesStore.getAt(i - 1).get('phone'));
editor.setValue(phonesStore.getAt(i - 1).get('phone'));
}
}
}
}
}
};
Ext.define('MyView', {
extend: 'Ext.grid.Panel',
store: Ext.create('Ext.data.Store', {
model: 'Person',
proxy: {
type: 'memory'
},
data: [
{name: 'blah', phones: [{phone: 123456789, type: 'Home'}, {phone: 9999999999, type: 'Cell'}]},
{name: 'bleh', phones: [{phone: 222222222, type: 'Home'}, {phone: 1111111111, type: 'Cell'}]}
]
}),
plugins: [
{ptype: 'rowediting', clicksToEdit: 1, listeners: {beforeedit: beforeEdit}}
],
height: 300,
width: 400,
initComponent: function() {
var store = this.getStore();
if (store) {
var firstRecord = store.first();
if (firstRecord) {
var phonesStore = firstRecord.getPhonesStore();
if (phonesStore) {
var columns = [{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name',
editor: {
xtype: 'textfield',
hideTrigger: true
}
}];
phonesStore.each(function(phoneRec) {
columns.push({
xtype: 'gridcolumn',
text: phoneRec.get('type'),
renderer: this.phoneRenderer,
editor: {
xtype: 'numberfield',
hideTrigger: true
}
});
}, this);
this.columns = columns;
}
}
}
this.callParent();
},
phoneRenderer: function(value, metaData, record, rowIndex, colIndex) {
return record.getPhonesStore().getAt(colIndex - 1).get('phone');
}
});
Ext.create('MyView', {
renderTo: Ext.getBody()
});
}
});
В общем, у меня есть 3 колонки ... Name, Home и Cell. Теперь вы можете подумать, почему бы мне просто не создать объект Cell и Home вместо массива phones ... ну, это не то, что я ищу, потому что я не думаю, что это правильно структурировать этот данные. Во всяком случае, я создаю эти два дополнительных столбца, когда я запускаю свою сетку.
Проблема связана с редактором, который я установил для столбцов «Главная» и «Ячейка» ... потому что я использую вложенные данные и не имею надлежащего dataIndex, когда редактор рисует, он имеет пустое значение для редактора. Поэтому я решил попробовать нажать на событие beforeedit, и я могу получить свои ценности, но, к сожалению, не похоже, что я могу установить значение редактора, так как я предполагаю, что метод startEdit имеет некоторые хитрости.
Вы увидите, что когда вы нажимаете на строку, она предупреждает значения «Дом» и «Ячейка», которые я хочу установить в своих редакторах, но использование setValue для редактора не работает ... у кого-нибудь есть понимание о том, как это сделать?
я смог решить эту проблему с использованием колонки действий для запуска редактора, но я 'все еще не удовлетворен ... см. [эту скрипку] (https://fiddle.sencha.com/#fiddle/nhq). – incutonez