ExtJS: Extending a form panel to a window object

Question

I'm developing a form with many fields (eg 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.

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:

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

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.

How can I include the type_form (which will be rendered in a window) into the big_form ?

Update

After @Alexander solution I updated my code as the following:

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

The problem remains the same but I feel that something is going wrong with the above code. How are hiddenfields and filefields related ?

Answer 1

You cannot, easy as that. A form is a container, and a window is floating, so a window cannot be an item of a form the component hierarchy.

What you can do, however, is to have two forms, big and small; add the fields to both forms, but hidden on the big one, and then just copy the values over when the small window is shown/hidden using

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

and vice versa.