ExtJS: расширение панели формы до объекта окна

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

Когда type_form включен в 'items' big_form, данные отправляются, но type_form отображается на главной панели, а не на панели окна.

Как я могу включить type_form (который будет отображаться в окне) в big_form?

Update

После решения @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());

и наоборот.