Question

我正在开发一个包含许多字段的表单（例如文件字段，文本字段，复选框，单选按钮等），我希望在窗口面板中呈现一些字段。单击按钮后将显示该窗口。

我使用上述功能开发了代码，但表单无效，因为窗口面板中的数据不会提交给服务器。以下是我的代码示例：

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,
            ...
        ]
    });

当big_form的'items'中包含type_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,
        ...
    ]
});

问题仍然存在，但我觉得上面的代码出了问题。隐藏字段和文件字段是如何相关的？

Answer 1

你不能那么容易。表单是一个容器，窗口是浮动的，因此窗口不能是组件层次结构的表单项。

然而，你可以做的是有两种形式，无论大小;将字段添加到两个表单中，但隐藏在大表单上，然后只需在使用

显示/隐藏小窗口时复制值

bigForm.getForm().setValues(smallForm.getValues());

反之亦然。

ExtJS：将表单面板扩展为窗口对象

更新

1 个答案: