View Full Version : [CLOSED] nested forms don't render in FF and IE, but the do in Chrome

30 Jun 2010, 12:05 PM
Ext version tested:

Ext 3.2.1

Adapter used:


css used:

only default ext-all.css

Browser versions tested against:

IE 8
FF 3.6.3 and 3.6.6 (firebug 1.5.4 installed)
Google Chrome 5.0.375.86

Operating System:



Creating a window with nested formPanels can result in unexpected errors in both Firefox and IE.
Google Chrome doens't seem to be affected.

I'm creating a window which contains exactly 1 formPanel.
This formPanel contains 1 tabPanel which contains a formPanel on each tab (currently only 2 tabs)
When I run the code as entered below, I get the following error in FF 3.6:

this[name] is null
Line 15179

In IE 8 I get this error message:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Wed, 30 Jun 2010 19:30:15 UTC

Message: Unknown runtime error
Line: 236
Char: 13
Code: 0
URI: https://vmwinxp-devel:2680/dman/resources/ext/js/ext-all-debug.js

Google Chrome renders the window correctly.

Test Case:

This code results in the errors described above:

Ext.onReady(function() {
var formField1 = new Ext.form.TextField({
id: 'idFormField1',
fieldLabel: 'Field 1',
name: 'field1',
width: 300

var formField2 = new Ext.form.TextField({
id: 'idFormField2',
fieldLabel: 'Field 2',
name: 'field2',
width: 300

var formPanel1 = new Ext.FormPanel({
title: 'FormPanel1',
items: formField1

var formPanel2 = new Ext.FormPanel({
title: 'FormPanel2',
items: formField2

var myFormTabPanel = new Ext.TabPanel({
plain: true,
activeTab: 0,
height: 350,
id: 'idMyFormTabPanel',
deferredRender: false,
items: [formPanel1, formPanel2]

myFormPanel = new Ext.FormPanel({
frame: true,
id: 'idJsonFormPanel',
labelWidth: 100,
width: 680,
autoHeight: true,
items: [myFormTabPanel]

var myWindow = new Ext.Window({
id: 'idWindow',
title: 'title',
layout: 'fit',
width: 700,
closeAction: 'hide',
plain: true,
items: myFormPanel


Steps to reproduce the problem:

paste the above code in a .js file, include it in a index.html file. and load the index.html page
open FF (3.6) and load the index.html file. You'll get the error described above (if you have firebug installed, no error and no form when firebug is not installed)
open IE 8 and load the index.html file. You'll get the error described above
open Google Chrome (5.0) and load the index.html file. You'll see the window with tabpanel and forms as desired.

The result that was expected:

Show a window with a tabPanel with a form on each tab

The result that occurs instead:

the window can't get rendered in FF (and an error is thrown if you have Firebug installed)
the window can't get rendered in IE 8 and an error is thrown.

Screenshot or Video:


Possible fix:

workaround: don't use activeTab and don't use deferredRender in the TabPanel.
This is of course a temporary workaround as it should be possible to use those config options
fix for FF: replace the following code in ext-all-debug.js (starting at line 15166):


with this code:

// BEGIN bugfix ---
if (!this[name])
var el = document.createElement('div');
el.className = this[name+'Cls'];
this[name] = Ext.get(pnode.appendChild(el));
// --- END bugfix


This solves the issue for FF, but not for IE

30 Jun 2010, 6:18 PM
It's not valid html to use nested forms -> http://validator.w3.org/


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<form method="POST" action="foo">
<div><input type="text" name="x" /></div>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<form method="POST" action="foo">
<input type="text" name="x" />
<form method="POST" action="bar">
<input type="text" name="y" />

30 Jun 2010, 11:19 PM
I understand that it's not valid html to use nested forms, but I'm writing javascript, not html.
What I mean is that it should be possible to nest forms in extjs where extjs renders the html in such a way that it doesn't interfere with the html restrictions.

There are several other frameworks that also allow nested forms.
E.g. Wicket (http://weblogs.java.net/blog/jjviana/archive/2010/03/30/nested-forms-what-wickedt-idea), rails (http://ryandaigle.com/articles/2009/2/1/what-s-new-in-edge-rails-nested-attributes#comment-form), ...

Moreover, it does work in extjs too with Chrome AND with firefox (after a fix in the ext library), which indicates that this isn't a limitation of html but a bug in extjs.

30 Jun 2010, 11:24 PM
Just because they allow it doesn't make it correct. You're writing javascript that generates html, so you're still bound by the same rules.

If you want to have forms that span across multiple tabs, you need to nest the tabpanel inside a form panel. Everything inside each tab will automatically be submitted with the form.

Also note, that wicket doesn't ~actually~ support it, from the link:

You must be asking yourself: the HTML standard doesn't have support for nested forms, right? How comes Wicket allows you to do that?

The answer is Wicket magically replaces the inner form with a <span> section, so that there will be only one HTML form, but in the Java representation it still maps each form component to the right form.

Which is basically the approach I've suggested above.

30 Jun 2010, 11:41 PM
The problem is not that I want multiple tabs to be submitted at once, the problem is that I have objects that refer to other objects, which should be retrieved separately, but displayed together (each object in a separate tab).

I have a grid with 5 applications objects.
When I double click on a row in that grid, a window pops up that displays the selected record (application) and all its details in the first tab of a tabpanel.
But each application object also has a logging object (that can be reused between multiple application objects) and that logging object will be loaded and displayed in a second tab of the tabpanel.

Both the application object and logging object can be altered (and submitted) in their own tab, but shouldn't affect the other object directly.
I.e. when I modify the logging object and submit it, I don't want the application object to be submitted, as it hasn't changed.
When I select a completely different logging object however (there is a select button to select a logging object from a grid) the application object should be updated to point to that new logging object.

The easiest way to do this is by using nested forms, so that's why I implemented it this way.

And as I said, if you add a simple if clause to the extjs library, the behaviour is corrected for FF.
This doesn't seem like an unacceptable fix to me, is it ?

For IE I don't have a clue yet because it has the habit of giving rather cryptic or even completely wrong error messages, but I'm confident that it's fixable as well.

30 Jun 2010, 11:53 PM
Again, if it were an actual bug, we'd look at fixing it. But I don't think this is a bug. If you want to override the framework to do so, obviously you're most welcome to, but the behaviour of nesting html forms isn't consistent across browser, nor is it allowed by the specification.