1. #1
    Ext JS Premium Member
    Join Date
    Jan 2009
    Posts
    19
    Vote Rating
    0
    tcp is on a distinguished road

      0  

    Default Problems Rendering Second Form with Identical Configurations, Caching Problem ?

    Problems Rendering Second Form with Identical Configurations, Caching Problem ?


    Summary
    Cannot load a second form - exception thrown because DOM elements are not created.

    Versions
    ExtJS 4.1 GA, Latest Version of Chrome and FireFox

    Demo
    http://ourmarketingsolution.com/test/extjs/

    Details
    I'm seeing problems when rendering a second form on a page that uses nearly identical configuration as a previous form. The problem persists even if I destroy the original form.

    The actual error occures on line 25898 where an exception is thrown.

    This error is attributable to line 25865, starting for a call to a field container "fieldcontainer-1021". The call to Ext.getDom(me.id) does not return the dom element, ie, Ext.getElementById() on line 10877 does return the element.

  2. #2
    Ext JS Premium Member
    Join Date
    Jan 2009
    Posts
    19
    Vote Rating
    0
    tcp is on a distinguished road

      0  

    Default Screenshots

    Screenshots


    Screenshots detailing the problem, starting from the exception and working back in time.

    Exception Details

    Firebug - Extjs Problem Demo - Exception Details.jpg

    Exception is caught and handled.

    Exception Thrown

    Firebug - Extjs Problem Demo - Point of Failure.jpg

    This is where the actual exception occures.

    Form DOM

    Firebug - Extjs Problem Demo - Form Cache.jpg

    The form DOM exists, but the internal form elements do not.

    No DOM

    Firebug - Extjs Problem Demo - render fieldcontainer.jpg

    This is the Ext object that should have an associated DOM element, but does not.

    Element Does Not Exist

    Firebug - Extjs Problem Demo - ExtgetDom.jpg

    This screenshot shows that the browser is unable to fetch the DOM element. So the question is, why is it created for the first form but not the second?

  3. #3
    Ext JS Premium Member
    Join Date
    Jan 2009
    Posts
    19
    Vote Rating
    0
    tcp is on a distinguished road

      0  

    Default


    Questions
    * If this is a problem related to caching ( Ext.cache['form-#'] ), what is the best way to disable caching during rendering ?
    * Where is the actual DOM created? I traced some of the code back to markup() on line 10369, but generateMarkup seems to be generating the correct code ( 403 elements in the buffer[] which are then joined() ) ?
    * What is the best way to completely wipe a form, including DOM structure ? Does this also remove the form from the cache ?

  4. #4
    Ext JS Premium Member
    Join Date
    Jan 2009
    Posts
    19
    Vote Rating
    0
    tcp is on a distinguished road

      0  

    Default


    Not sure why I can't edit the posts - here is link to the fullsize screenshots - http://ourmarketingsolution.com/test/screenshots/ .

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,046
    Vote Rating
    657
    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


    Without seeing code it's difficult to say, but you're probably doing something like this:

    Code:
    var c = new Ext.Component();
    
    var ct = new Ext.container.Container({
        items: c
    });
    ct.destroy();
    
    new Ext.container.Container({
        items: c
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Ext JS Premium Member
    Join Date
    Jan 2009
    Posts
    19
    Vote Rating
    0
    tcp is on a distinguished road

      0  

    Default


    Close - creating the FormPanel directly. Code below ( code file is http://ourmarketingsolution.com/test...files/order.js ) .

    Code:
    try {
    	
    	var form1 = Ext.create('Ext.form.Panel',options);
    	
    	messages.insertHtml('beforeEnd','<p class="info"><strong>Step:</strong>Preparing to load the form for the first time.</p>');
    	form1.render(config.target);
    	
    	html = Ext.htmlEncode(Ext.get(config.target).getHTML());	
    	Ext.Msg.show({
    		title: 'Initial Rendered HTML',
    		width: 600,
    		height: 400,
    		msg: html
    	});
    	alert('continue');
    	
    	messages.insertHtml('beforeEnd','<p class="info"><strong>Step:</strong>Removing the form element.</p>');
    	form1.destroy();
    	
    	html = Ext.htmlEncode(Ext.get(config.target).getHTML());
    	Ext.Msg.show({
    		title: 'After removal of Form1',
    		width: 600,
    		height: 400,
    		msg: html
    	});
    	alert('continue')
    	
    	messages.insertHtml('beforeEnd','<p class="info"><strong>Step:</strong>Preparing to load the form for the second time.</p>');
    	
    	var form2 = Ext.create('Ext.form.Panel',options);
    	form2.render(config.target);
    	
    	html = Ext.htmlEncode(Ext.get(config.target).getHTML());
    	Ext.Msg.show({
    		title: 'Second Rendered HTML',
    		width: 600,
    		height: 400,
    		msg: html
    	});
    	
    	messages.insertHtml('beforeEnd','<p class="info"><strong>Step:</strong>Finished</p>');
    } catch (e) {
    	messages.insertHtml('beforeEnd','<p class="error"><strong>Exception:</strong> ' + e.toString() + '</p>');
    }

  7. #7
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,046
    Vote Rating
    657
    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


    That's not a good approach to be taking. Messing about with the markup like that isn't particularly maintainable.

    Instead, insert the form into a window using the items config or the add method.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Thread Participants: 1