私は多くのフィールド(たとえば、ファイルフィールド、テキストフィールド、チェックボックス、ラジオボタンなど)を持つフォームを開発していますが、ウィンドウパネルにいくつかのフィールドをレンダリングしたいです。ボタンをクリックすると、ウィンドウが表示されます。
上記の機能を備えたコードを開発しましたが、ウィンドウパネルからのデータがサーバーに送信されないため、フォームは無効です。 これが私のコードのサンプルです:
type_form = Ext.create('Ext.form.Panel', {
title: 'Data',
collapsible: true,
collapsed: true,
items: [{
xtype: 'filefield',
name: 'type_1',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Add type_1'
}, {
xtype: 'filefield',
name: 'type_2',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Add type_2'
}]
});
type_window = Ext.create('Ext.window.Window', {
title: 'window',
items: [type_form],
height:200, width:300,
layout: 'fit',
closeAction: 'hide',
});
big_form = Ext.create('Ext.form.Panel', {
title: 'Platform',
region: 'west',
width: 310,
split: true,
autoScroll: true,
bodyPadding: 5,
frame: true,
items: [
other_forms,
{
xtype: 'button',
text: 'Add more Data',
handler: function() {
type_window.show();
}
}, {
xtype: 'fieldset',
title: 'Models 1',
collapsible: true,
collapsed: false,
items: [{
xtype: 'checkboxfield',
name: 'models_1',
boxLabel: 'mod 1',
inputValue: 'mod_1'
}, {
xtype: 'checkboxfield',
name: 'models_2',
boxLabel: 'mod 2',
inputValue: 'mod_2'
}
}]
}]
buttons: [{
text: 'Upload',
handler: function() {
var form = this.up('form').getForm();
if(form.isValid()) {
form.submit({
url: 'upload_file/',
waitMsg: 'Uploading...',
//headers: {'X-CSRFToken': Ext.util.Cookies.get('csrftoken')},
params: {
csrfmiddlewaretoken: Ext.util.Cookies.get('csrftoken')
},
success: function(fp, o) {
Ext.Msg.alert('Success', 'Your file "' + o.result.file + '" has been uploaded.');
}
});
}
}
}]
});
Ext.create('Ext.Viewport', {
layout: 'border',
items: [
big_form,
...
]
});
type_formがbig_formの「アイテム」に含まれている場合、データは送信されますが、type_formはウィンドウパネルではなくメインパネルに表示されます。
type_form(ウィンドウにレンダリングされる)をbig_formに含めるにはどうすればよいですか?
更新@Alexanderソリューションの後、次のようにコードを更新しました。
type_form = Ext.create('Ext.form.Panel', {
title: 'Data',
collapsible: true,
collapsed: true,
items: [{
xtype: 'filefield',
name: 'type_1',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Add type_1'
}, {
xtype: 'filefield',
name: 'type_2',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Add type_2'
}]
});
type_window = Ext.create('Ext.window.Window', {
title: 'window',
items: [type_form],
height:200, width:300,
layout: 'fit',
closeAction: 'hide',
});
big_form = Ext.create('Ext.form.Panel', {
title: 'Platform',
region: 'west',
width: 310,
split: true,
autoScroll: true,
bodyPadding: 5,
frame: true,
items: [
other_forms,
{
xtype: 'hiddenfield',
name: 'type_1',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Add type_1'
}, {
xtype: 'hiddenfield',
name: 'type_2',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Add type_2'
}
{
xtype: 'button',
text: 'Add more Data',
handler: function() {
type_window.show();
big_form.getForm().setValues(type_form.getValues());
}
}, {
xtype: 'fieldset',
title: 'Models 1',
collapsible: true,
collapsed: false,
items: [{
xtype: 'checkboxfield',
name: 'models_1',
boxLabel: 'mod 1',
inputValue: 'mod_1'
}, {
xtype: 'checkboxfield',
name: 'models_2',
boxLabel: 'mod 2',
inputValue: 'mod_2'
}
}]
}]
buttons: [{
text: 'Upload',
handler: function() {
var form = this.up('form').getForm();
if(form.isValid()) {
form.submit({
url: 'upload_file/',
waitMsg: 'Uploading...',
//headers: {'X-CSRFToken': Ext.util.Cookies.get('csrftoken')},
params: {
csrfmiddlewaretoken: Ext.util.Cookies.get('csrftoken')
},
success: function(fp, o) {
Ext.Msg.alert('Success', 'Your file "' + o.result.file + '" has been uploaded.');
}
});
}
}
}]
});
Ext.create('Ext.Viewport', {
layout: 'border',
items: [
big_form,
...
]
});
問題は同じままですが、上記のコードに何か問題があると感じています。隠しフィールドとファイルフィールドはどのように関連していますか?
簡単ではありません。フォームはコンテナであり、ウィンドウはフローティングであるため、ウィンドウをコンポーネント階層のフォームのアイテムにすることはできません。
ただし、できることは、大と小の2つの形式を使用することです。両方のフォームにフィールドを追加しますが、大きなフォームでは非表示にしてから、小さなウィンドウが表示/非表示のときに値をコピーするだけです
およびその逆。