我有“复杂”的数据——这意味着我的数据中有关联——我试图在我的网格中使用这些关联。我根据一些数据创建列，并且因为数据嵌套在一个数组中，所以我为每一列设置了一个渲染器……我还设置了一个编辑器。渲染器工作得很好，但是设置编辑器的值并没有像我想象的那样工作。这是我的代码（和Fiddle）：
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数组......好吧，这不是我想要做的，因为我认为这不是正确构造这些数据的方法. 无论如何，我在初始化网格时创建了这两个额外的列。
问题出在我为“Home”和“Cell”列设置的编辑器上......因为我使用的是嵌套数据并且没有正确的 dataIndex，当编辑器呈现时，它的值为空编辑。所以我想尝试利用 beforeedit 事件，我可以获得我的值，但不幸的是，它看起来不像我可以设置编辑器的值，因为我假设startEdit方法有一些诡计。
您会看到，当您单击一行时，它会提醒我要在其编辑器中设置的 Home 和 Cell 值，但是对编辑器使用 setValue 不起作用...有没有人对如何获取有任何见解这去吗？