title: ExtJS: Extending a form panel to a window object
body: <p>I'm developing a form with many fields (e.g filefield, textfield, checkboxes, radio buttons etc) and I want some fields to be rendered in a window panel. The window will be displayed after clicking a button.</p>
  
  <p>I developed the code with the above functionality but the form is invalid because the data from the window panel doesn't submit to the server. 
  Here is a sample of my code:</p>
  
  <pre><code>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,
              ...
          ]
      });
  </code></pre>
  
  <p>When type_form is included in big_form's 'items' the data is submitted but the type_form is displayed on the main panel and not in the window panel.</p>
  
  <p>How can I include the type_form (which will be rendered in a window) into the big_form ?</p>
  
  <h2>Update</h2>
  
  <p>After @Alexander solution I updated my code as the following:</p>
  
  <pre><code>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,
          ...
      ]
  });
  </code></pre>
  
  <p>The problem remains the same but I feel that something is going wrong with the above code. How are hiddenfields and filefields related ?</p>