読者です 読者をやめる 読者になる 読者になる

EditorGridに入力された値をまとめてSubmitする

FormPanelの中にEditorGridPanelを入れ、Grid上で編集した内容をFormPanelのsubmit時にまとめてサーバに送信する、ということがしたかったのですが、正式な方法がわからなかったので次のように対応してみました。

// セルのrender時にhiddenフィールドを追加する
var hiddenRenderer = function(value, metadata, rec, row, col){
	// パラメータ名がitems[i].param1のようになる
	return value + '<input type=hidden name="items['+row+'].' + rec.fields.get(col).name + '" value="'+value+'">';
}

var grid = new Ext.grid.EditorGridPanel({
	columns: [
	    {header:'id', renderer: hiddenRenderer},
	    {header:'パラメータ1', renderer: hiddenRenderer, editor: new Ext.form.TextField({...})},
	    {header:'パラメータ2', renderer: hiddenRenderer, editor: new Ext.form.TextField({...})}
	],
	store: new Ext.data.JsonStore({
	    	root: 'items',
	        fields: [
	            {name: 'id'},
	            {name: 'param1'},
	            {name: 'param2'}],
	        data: ...
	})
});

各セルの値を描画する際に、一緒にhiddenフィールドを生成するrendererを作成して、これをColumnModel(columns)で指定しています。とりあえずこれで望みどおりのデータが送信されるようになりました。

ColumnModelのeditorで指定しているテキストフィールドはcolumnごとに共通なようで、各columnで最後に編集した値もいっしょに送信されていました。不要なデータではありますが、特に悪影響はないのでこれについては無視することにしました。

これとは別に、submitする際にstoreを読込んでそれを送信する送信パラメータに追加するという方法もあると思います。