ExtJS：フォームパネルをウィンドウオブジェクトに拡張する

私は多くのフィールド（たとえば、ファイルフィールド、テキストフィールド、チェックボックス、ラジオボタンなど）を持つフォームを開発していますが、ウィンドウパネルにいくつかのフィールドをレンダリングしたいです。ボタンをクリックすると、ウィンドウが表示されます。

上記の機能を備えたコードを開発しましたが、ウィンドウパネルからのデータがサーバーに送信されないため、フォームは無効です。 これが私のコードのサンプルです：

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

問題は同じままですが、上記のコードに何か問題があると感じています。隠しフィールドとファイルフィールドはどのように関連していますか？