所以我上周在 ExtJS 论坛上发布了这个，但没有人回应，我有点疯狂地想弄清楚：
我对 ExtJS 还很陌生（上周刚刚学习它是为了工作），但我已经使用其他 JavaScript 库已经有一段时间了。我正在制作一个自定义控件来编辑属性列表（当前由 JSON 请求填充）。我将 PropertyGrid 与自定义 GridEditor（通过扩展各种 Ext.form 字段创建）一起使用。我的所有自定义字段都可以使用，除了一个重复值编辑器。基本上，该字段将通过 JSON 请求传递一个简单的 2d 键/值对数组，它显示在 EditorGridPanel 中（在我创建的 Ext.Window 内）。
下面是定义重复值编辑器的 JSON 请求部分：
{
key: 'Repeating',
type: 'repeating',
category: 'Category A',
options: {
dataArray: [
{key: 'key A', value: 'value A'},
{key: 'key B', value: 'value B'},
{key: 'key C', value: 'value C'}
]
}
}
键是字段的名称（显示在 PropertyGrid 的左列）。类型告诉创建所有网格编辑器的函数使用什么类型的自定义编辑器。该类别用于确定将 GridEditor 添加到哪个 PropertyGrid（我有多个 PropertyGird，它们都包含在具有布局的面板中：'acordion'）。选项中的任何内容都会在创建时添加到扩展的 Ext.form 字段。
因此dataArray被附加到我的重复值编辑器中，用于设置初始键/值对，并存储用于编辑它的 Ext.Window 传递回 GridEditor 的数组。
经过一些试验后，我决定使用 TriggerField 作为重复值类型的 GridEditor。下面是定义重复值字段的代码：
Ext.form.customFields = {
'repeating': Ext.extend(Ext.form.TriggerField, {
triggerClass: 'x-form-edit-trigger',
enableKeyEvents: true
})
};
这是设置它的代码：
Ext.form.customFields['repeating'] = Ext.extend(Ext.form.customFields['repeating'], {
onTriggerClick: function()
{
this.editorWindow.show();
},
listeners: {
'render': function(field)
{
field.editorWindow = new Ext.MultiSelectWindow({
data: field.dataArray,
parent: field
});
},
'keydown': function(field, event)
{
event.stopEvent();
},
'beforerender': function()
{
for (i in this.opt) {
if (i != 'store') {
this[i] = this.opt[i];
}
else {
this.store.loadData(this.opt.store);
}
}
if (this.regex != undefined) {
this.validator = function(value)
{
return this.regex.test(value);
};
}
}
}
});
最后，这是自定义编辑器窗口的代码：
Ext.MultiSelectWindow = function(args)
{
var obj = this;
obj.args = args;
obj.KeyValue = new Ext.data.Record.create([{
name: 'key'
}, {
name: 'value'
}]);
obj.gridStore = new Ext.data.Store({
data: obj.args.data,
reader: new Ext.data.JsonReader({}, obj.KeyValue),
autoLoad: true
});
obj.cm = new Ext.grid.ColumnModel([{
id: 'key',
header: "Key",
dataIndex: 'key',
editor: new Ext.form.TextField({
allowBlank: false
}),
hideable: false,
sortable: false,
menuDisabled: true,
css: 'font-weight: bold;'
}, {
id: 'value',
header: "Value",
dataIndex: 'value',
editor: new Ext.form.TextField({}),
hideable: false,
sortable: false,
menuDisabled: true
}]);
obj.gridEditor = new Ext.grid.EditorGridPanel({
cm: obj.cm,
height: 280,
store: obj.gridStore,
autoExpandColumn: 'value',
listeners: {
'render': function()
{
// set up local aliases
obj.a = new Array();
obj.a.grid = obj.gridEditor;
obj.a.store = obj.a.grid.getStore();
obj.a.sel = obj.a.grid.getSelectionModel();
}
},
bbar: [{
text: 'Add',
cls: 'x-btn-text-icon',
icon: '/lib/images/add.png',
listeners: {
'click': function()
{
var kv = new obj.KeyValue({
key: '',
value: ''
});
var row = obj.a.store.data.items.length;
obj.a.grid.stopEditing();
obj.a.store.insert(row, kv);
obj.a.grid.startEditing(row, 0);
}
}
}, {
text: 'Delete',
cls: 'x-btn-text-icon',
icon: '/lib/images/delete.png',
listeners: {
'click': function()
{
if (obj.a.sel.selection)
obj.a.store.remove(obj.a.sel.selection.record);
}
}
}]
});
obj.panelAll = new Ext.Panel({
border: false,
layout: 'absolute',
items: [new Ext.Panel({
width: 250,
border: false,
x: 0,
y: 0,
items: obj.gridEditor
}), new Ext.Panel({
border: false,
x: 254,
y: 0,
items: [new Ext.Button({
cls: 'x-btn-icon-side',
icon: '/lib/images/arrow_up.png',
listeners: {
'click': function()
{
if (obj.a.sel.selection) {
var row = obj.a.sel.selection.cell[0];
var rec = obj.a.store.getAt(row);
if (row >= 1) {
obj.a.store.remove(rec);
obj.a.store.insert(row - 1, rec);
obj.a.grid.startEditing(row - 1, 0);
}
}
}
}
}), new Ext.Button({
cls: 'x-btn-icon-side',
icon: '/lib/images/arrow_down.png',
listeners: {
'click': function()
{
if (obj.a.sel.selection) {
var row = obj.a.sel.selection.cell[0];
var rec = obj.a.store.getAt(row);
var len = obj.a.store.data.items.length;
if (row < len - 1) {
obj.a.store.remove(rec);
obj.a.store.insert(row + 1, rec);
obj.a.grid.startEditing(row + 1, 0);
}
}
}
}
})]
})]
});
obj.win = new Ext.Window({
title: 'Repeating Value Editor',
layout: 'fit',
closeAction: 'hide',
border: false,
items: obj.panelAll,
width: 300,
height: 350,
resizable: false,
shadow: false,
buttonAlign: 'left',
buttons: [{
text: 'OK',
handler: function()
{
// reset the repeating field data array
obj.args.parent.dataArray = [];
for (r in obj.a.store.data.items)
obj.args.parent.dataArray[r] = obj.a.store.data.items[r].data;
obj.args.parent.setRawValue(attrValueToString(obj.args.parent.dataArray));
obj.win.hide();
}
}, {
text: 'Cancel',
handler: function()
{
obj.win.hide();
}
}]
});
obj.show = function()
{
obj.win.show();
obj.a.store.loadData(obj.args.parent.dataArray);
}
}
现在解决我的问题：除了窗口的“确定”按钮处理程序的第 7 行（ obj.args.parent.setRawValue(attrValueToString(obj.args.parent.dataArray)); ）之外，所有这些都可以正常工作。
obj是自别名。 obj.args.parent是打开重复值编辑器窗口的字段的别名。 attrValueToString()是一个函数，它接收一个二维数组并将其转换为具有特殊格式的字符串，以便它可以在 TriggerField 的文本框中以可读、有意义的方式显示。
数据被加载回字段的 dataArray 变量中，如果再次打开编辑器，视图中就会包含新数据。但是，在创建 TriggerField 之后，我无法设法在 TriggerField 中显示任何类型的值。我已经尝试过 obj.args.parent.setValue('abc') 和 obj.args.parent.setRawValue('abc') 。没有抛出异常，但 TriggerField 中显示的值没有改变。我什至尝试创建一个自定义函数来从 TriggerField 中设置值 - 如下所示：
Ext.form.customFields['repeating'] = Ext.extend(Ext.form.customFields['repeating'], {
setFieldValue: function(value){
this.setValue(value);
}
});
如果从 TriggerField 中调用此自定义函数，则此自定义函数有效，但从其他地方（即编辑器窗口的“确定”按钮处理程序）调用时则无效。该函数可以从任何地方成功调用，并且不会产生任何异常，但是，如果从 TriggerField 中调用，它只会正确设置值。
当实例化为基本表单字段时，自定义字段可以完美运行：
var sample = new Ext.form.customFields['repeating']({
renderTo: Ext.getBody(),
dataArray: [
{key: 'key A', value: 'value A'},
{key: 'key B', value: 'value B'},
{key: 'key C', value: 'value C'}
]
});
我已经搜索了 ExtJS API 文档并完成了我能想到的所有可能的谷歌搜索。我发现一些论坛帖子似乎来自有类似问题的人，但他们从未得到明确的答案。
对此问题的任何帮助将不胜感激 - 在此先感谢！