というわけで、先週 ExtJS フォーラムに投稿しましたが、誰も応答しておらず、ちょっと頭がおかしくなっています。
私は ExtJS にかなり慣れていません (仕事のために先週学習したばかりです) が、かなり長い間、他の JavaScript ライブラリを使用してきました。属性のリストを編集するためのカスタム コントロールを作成しています (現在は JSON 要求によって設定されています)。カスタム GridEditor (さまざまな Ext.form フィールドを拡張して作成) で PropertyGrid を使用しています。カスタム フィールドはすべて、繰り返し値エディターである 1 つを除いて機能します。基本的に、フィールドは JSON リクエストによって単純な 2 次元のキーと値のペアの配列に渡され、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 があり、すべてがレイアウト 'アコーディオン' のパネルに含まれています) 。オプションの内容は、作成時に拡張Ext.formフィールドに追加されます。
したがって、 dataArrayは、最初のキーと値のペアを設定し、編集に使用される Ext.Window によって GridEditor に返される配列を格納するために、繰り返し値エディターにアタッチされています。
いくつか実験した後、繰り返し値の型の GridEditor として TriggerField を使用することにしました。繰り返し値フィールドの定義のコードは次のとおりです。
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);
}
}
今私の問題のために：ウィンドウの「OK」ボタンハンドラーの7行目（ obj.args.parent.setRawValue(attrValueToString(obj.args.parent.dataArray)); ）を除いて、これはすべて正常に機能します。
objは自己エイリアスです。 obj.args.parentは、繰り返し値エディター ウィンドウを開いたフィールドのエイリアスです。 attrValueToString()は、2 次元配列を受け取り、それを特別なフォーマットの文字列に変換して、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 のドキュメントを精査し、考えられるすべての Google 検索を実行しました。同様の問題を抱えている人々からのものと思われるフォーラムの投稿をいくつか見つけましたが、明確な答えは得られません.
この問題についての助けをいただければ幸いです-事前に感謝します!