ExtJS FormPanel in a FormPanel fails with "this.body is null"

Question

I have a rather complicated setup which I have boiled down to the code below. I have an outer FormPanel, where I am trying to include a component that is a sub-class FormPanel. In FF it is causing a "this.body is null" error.

Is this happening to anyone else? Is it possible to get this to work? I very much do not want to have to touch the subclass if I don't have to.

var test = new Ext.Window({
  title: 'test',
  items: [{
    xtype: 'form',
    items: [{
      // this is where the subclass of FormPanel goes
      xtype: 'form',
      items: [{
        xtype: 'textfield',
        fieldLabel: 'Testing'
      }]
    }]
  }]
});
test.show();

Answer 1

I'm not sure if this is your exact issue, but I do know you are never supposed to embed an xtype: 'form' into an xtype: 'form'. If you need its layout functionality then instead of xtype: 'form', use xtype: 'panel' with layout: 'form'.

Answer 2

You are essentially trying to embed a FormPanel inside another FormPanel. This will not work. I think what you want is this:

var test = new Ext.Window({ title: 'test', items: [{ xtype: 'form', items: [{ xtype: 'textfield', fieldLabel: 'Testing' }] }] }); test.show();

Answer 3

I think it would work if you added something (f.e. hidden textfield) into first 'form'.

Answer 4

Extjs doesn't stop you from needing to understand HTML. You can't have nested forms.