如何在编辑器网格面板内呈现远程组合框的初始显示值

Question

注意：我最近发布了一个关于简单远程组合框的问题。这个问题类似但不重复，因为它将远程组合放在远程网格中。

我正在呈现EditorGridPanel。其中一列使用ComboBox编辑器。网格和组合框从不同的HTTP端点加载各自的数据。如何在初始加载时强制组合列呈现显示字段？

我找到了一些变通办法，但似乎应该有一个更简单的方法。我的解决方案基本上强制这些异步加载是同步的：首先加载组合存储，然后加载网格存储。例如，如果我在一个网格中有多个远程组合，这会变得复杂。在底层数据更改后，是否没有办法强制组合重新呈现自己？

下面是一个例子。您可以在任何ExtJS 3.4 Fiddle中删除此代码。

// Create a remote store for the combo box.
var remoteStore = new Ext.data.JsonStore({
url: 'https://jsonplaceholder.typicode.com/todos',
autoLoad: true,
fields: ['id', 'title']
});
// Create the combo box.
var remoteCombo = new Ext.form.ComboBox({
fieldLabel: 'Remote Store (busted)',
triggerAction: 'all',
mode: 'local',
store: remoteStore,
valueField: 'id',
displayField: 'title',
lazyRender: true
});
// Create the column model for the grid.
var columnModel = new Ext.grid.ColumnModel(
[{
header: 'Column 1',
dataIndex: 'column1',
width: 220,
editor: new Ext.form.TextField()
}, {
id: 'column2',
header: 'Column 2',
dataIndex: 'column2',
width: 130,
editor: remoteCombo,
renderer: (value) => {
var record = remoteCombo.findRecord(remoteCombo.valueField, value);
return record ? record.get(remoteCombo.displayField) : 'Loading...';
}
}]
);
// Create a local grid store with some fake data.
var fakeData = [{
column1: 'row 1',
column2: 1
}, {
column1: 'row 2',
column2: '2'
}, {
column1: 'row 3',
column2: '3'
}];
var gridStore = new Ext.data.JsonStore({
autoDestroy: true,
autoLoad: false,
fields: ['column1', 'column2'],
data: fakeData
});
// Workaround #1: load grid store AFTER all required combo stores are loaded.
// remoteStore.on('load', () => gridStore.loadData(fakeData));
// Workaround #2: force the column to re-render all records after the store is loaded.
// Kludgy and also marks the records as dirty.
// remoteStore.on('load', () => {
//     gridStore.each((record) => {
//         var originalValue = record.get('column2');
//         record.set('column2', undefined);
//         record.set('column2', originalValue);
//     });
// });
// Render the grid.
new Ext.grid.EditorGridPanel({
store: gridStore,
cm: columnModel,
autoExpandColumn: 'column2',
renderTo: Ext.getBody(),
width: 600,
height: 300,
title: 'Grid with remote combo',
frame: true,
});

Answer 1

我认为可以避免同步加载存储。只需在网格"render"事件中放置remoteStore"load"事件的单个侦听器。类似这样的东西：

// Create a remote store for the combo box.
var remoteStore = new Ext.data.JsonStore({
url: 'https://jsonplaceholder.typicode.com/todos',
autoLoad: true,
fields: ['id', 'title']
});
// Create the combo box.
var remoteCombo = new Ext.form.ComboBox({
fieldLabel: 'Remote Store (busted)',
triggerAction: 'all',
mode: 'local',
store: remoteStore,
valueField: 'id',
displayField: 'title',
lazyRender: true
});
// Create the column model for the grid.
var columnModel = new Ext.grid.ColumnModel(
[{
header: 'Column 1',
dataIndex: 'column1',
width: 220,
editor: new Ext.form.TextField()
}, {
id: 'column2',
header: 'Column 2',
dataIndex: 'column2',
width: 130,
editor: remoteCombo,
renderer: (value, metaData, record, rowIndex, colIndex, store) => {
var recordIndex = remoteCombo.getStore().findExact(remoteCombo.valueField, value);
var record = remoteCombo.getStore().getAt(recordIndex);
return record ? record.get(remoteCombo.displayField) : 'Loading...';
}
}]
);
// Create a local grid store with some fake data.
var fakeData = [{
column1: 'row 1',
column2: 1
}, {
column1: 'row 2',
column2: 2
}, {
column1: 'row 3',
column2: 3
}];
var gridStore = new Ext.data.JsonStore({
autoDestroy: true,
autoLoad: false,
fields: ['column1', 'column2'],
data: fakeData
});
// Workaround #1: load grid store AFTER all required combo stores are loaded.
// remoteStore.on('load', () => gridStore.loadData(fakeData));
// Workaround #2: force the column to re-render all records after the store is loaded.
// Kludgy and also marks the records as dirty.
// remoteStore.on('load', () => {
//     gridStore.each((record) => {
//         var originalValue = record.get('column2');
//         record.set('column2', undefined);
//         record.set('column2', originalValue);
//     });
// });
// Render the grid.
new Ext.grid.EditorGridPanel({
store: gridStore,
cm: columnModel,
autoExpandColumn: 'column2',
renderTo: Ext.getBody(),
width: 600,
height: 300,
title: 'Grid with remote combo',
frame: true,
listeners: {
render: function (grid) {
if (remoteStore.lastOptions === null) {
remoteStore.on('load', function (store) {
grid.getView().refresh();
}, this, {
single: true
});
}
}
}
});

p.S。我已经修复了渲染器。P.P.S.使用findExact小心字符串和整数值。。AFAIK是一种类型敏感的方法。