所以我上周在ExtJS论坛上发布了这个帖子，但是没有人回复，我想要弄清楚它有点疯狂：
我是ExtJS的新手（上周才开始学习它），但是我已经使用其他JavaScript库了很长一段时间了。我正在制作一个自定义控件来编辑属性列表（当前由JSON请求填充）。我正在使用PropertyGrid和自定义GridEditor（通过扩展各种Ext.form字段创建）。除了one之外，我的所有自定义字段都有效，这是一个重复值编辑器。基本上，该字段将通过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行'OK'按钮处理程序（obj.args.parent.setRawValue（attrValueToString（obj.args.parent.dataArray））;）。
obj 是一个自我别名。 obj.args.parent 是打开重复值编辑器窗口的字段的别名。 attrValueToString（）是一个接收二维数组并将其转换为具有特殊格式的字符串的函数，因此可以在TriggerField的文本框中以可读，有意义的方式显示它。
数据被加载回字段的dataArray变量中，如果再次打开编辑器，它将在视图中包含新数据。但是，我无法在创建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中调用此自定义函数，则该函数无效，但在从其他位置调用时（即编辑器窗口的“OK”按钮处理程序）则无效。该函数可以从任何地方成功调用，并且不会产生任何异常，但是，只有在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文档并完成了我能想到的所有可能的谷歌搜索。我发现一些论坛帖子似乎来自有类似问题的人，但他们从来没有得到明确的答案。
对此事的任何帮助都将非常感谢 - 提前感谢！
答案 0 :(得分：1)
我认为你应该将Ext.override用于onTriggerClick处理函数，而不是在你的超类中重新定义它。
您也可以在创建triggerField之后（可能在'render'事件处理程序中）通过将分配给函数名称，即trigger.onTriggerClick = somefunction来设置它。