Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Dec 2007
    Posts
    14
    Vote Rating
    0
    santo is on a distinguished road

      0  

    Default [CLOSED] nested forms don't render in FF and IE, but the do in Chrome

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


    Ext version tested:
    • Ext 3.2.1

    Adapter used:
    • ext

    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:
    • Win2k3
    • Win7Pro

    Description:
    • Summary:
      Creating a window with nested formPanels can result in unexpected errors in both Firefox and IE.
      Google Chrome doens't seem to be affected.
    • Details:
      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:
      Code:
      this[name] is null
       this[name].applyStyles(this[name+'Style']); 
      https://localhost:2680/dman/resources/ext/js/ext-all-debug.js
      Line 15179
      In IE 8 I get this error message:
      Code:
      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:
    Code:
    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
    		});
    
    		myWindow.show();  
    });
    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:
    • attached

    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):
      Code:
                  if(this[name+'Style']){                
                      this[name].applyStyles(this[name+'Style']);
                  }
      with this code:
      Code:
                  if(this[name+'Style']){
                      // 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[name].applyStyles(this[name+'Style']);
                  }
      This solves the issue for FF, but not for IE
    Attached Images
    Last edited by santo; 30 Jun 2010 at 11:20 PM. Reason: reopend the issue as I'm not satisfied with the answer

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,065
    Vote Rating
    659
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    It's not valid html to use nested forms -> http://validator.w3.org/

    Works
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <title>Foo</title>
        </head>
        <body>
            <form method="POST" action="foo">
                <div><input type="text" name="x" /></div>
            </form>
        </body>
    </html>
    Fails:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <title>Foo</title>
        </head>
        <body>
            <form method="POST" action="foo">
                <div>
                    <input type="text" name="x" />
                    <form method="POST" action="bar">
                        <div>
                            <input type="text" name="y" />
                        </div>
                    </form>
                </div>
            </form>
        </body>
    </html>
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User
    Join Date
    Dec 2007
    Posts
    14
    Vote Rating
    0
    santo is on a distinguished road

      0  

    Default


    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...t-wickedt-idea), rails (http://ryandaigle.com/articles/2009/...s#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.

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,065
    Vote Rating
    659
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha User
    Join Date
    Dec 2007
    Posts
    14
    Vote Rating
    0
    santo is on a distinguished road

      0  

    Default


    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).

    Example:
    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.

  6. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,065
    Vote Rating
    659
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Similar Threads

  1. [CLOSED]Nested forms dont render correctly in FF
    By harro in forum Ext 3.x: Bugs
    Replies: 1
    Last Post: 22 Mar 2010, 5:56 PM
  2. [CLOSED][3.1] Tabs set to bottom don't render properly
    By Lloyd K in forum Ext 3.x: Bugs
    Replies: 3
    Last Post: 7 Feb 2010, 7:46 AM
  3. UI Events Don't Work in Firefox or Chrome
    By mathec in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 13 Jun 2009, 7:49 AM
  4. Replies: 11
    Last Post: 4 May 2008, 3:05 AM

Thread Participants: 1