[SOLVED] Unknown runtime error rendering a formPanel (Only in IE)

[paubach]

Hi all,
I have an error in IE (only) when run dr.render('dr'). I'm using the version 7 of IE. In firebug it works perfectly.

Where dr is:

var dr = new Ext.FormPanel({
    labelWidth: 125,
    frame: false,
    header: false,
    border: false,
    bodyStyle:'padding:5px 5px 0',
    width: 350,
    defaults: {width: 175},
    defaultType: 'datefield',
    items: [{
        fieldLabel: 'Start Date',
        name: 'startdt',
        id: 'startdt',
        vtype: 'daterange',
        endDateField: 'enddt' // id of the end date field
    },{
        fieldLabel: 'End Date',
        name: 'enddt',
        id: 'enddt',
        vtype: 'daterange',
        startDateField: 'startdt' // id of the start date field
    }]
});

The div exists when I render the formPanel on it.

Using Companion.JS debugger for IE, I get the following message:
Unknown runtime error (line 318) (ext-all-debug.js)

    overwrite : function(el, o, returnElement){
        el = Ext.getDom(el);
        el.innerHTML = createHtml(o);
        return returnElement ? Ext.get(el.firstChild, true) : el.firstChild;
    },

Doubleclicking on the error I have some more messages (the error comes from this).

ext-all-debug.js (line 3785)
ext-all-debug.js (line 15892)
ext-all-debug.js (line 15958)
ext-all-debug.js (line 28809)
ext-all-debug.js (line 12454)
ext-all-debug.js (line 14062)
cap_eu_browse_list.html (line 42) it is parent.dr.render('dr');


Any idea of why is it failing? I've spent almost all the day with it, but I didn't find the fix.

Thanks,
Pau

[Animal]

Can you try in on IE8? It has a proper debugger.

But you could also put some debug statements into that code, and see what is being inserted into that innerHTML. IE enforces more restrictions on what can be put inside what, so although I hate debugging with alerts, in IE, it's sometimes necessary:

    overwrite : function(el, o, returnElement){
        el = Ext.getDom(el);
        var h = createHtml(o);
alert(el.tagName + " " + h);
        el.innerHTML = h;
        return returnElement ? Ext.get(el.firstChild, true) : el.firstChild;
    },

Maybe too many alerts there, so perhaps you could implement a logger and do

    overwrite : function(el, o, returnElement){
        el = Ext.getDom(el);
        var h = createHtml(o);
logMessage(el.tagName + " " + h);
        el.innerHTML = h;
        return returnElement ? Ext.get(el.firstChild, true) : el.firstChild;
    },

[paubach]

Hi, thanks for the answer, Animal.

I installed IE8. I didn't know it had a debugger, although I don't like IE, I must admit it's been a very good work addition.

On the debugger I see that the debugger complains about this.body.

if(this.bodyStyle){
this.body.applyStyles(this.bodyStyle);
}

[paubach]

Well!! I noticed I were rendering the formPanel inside a form .

The stupid things take longer to be found.

What I don now is, instead of rendering a panel render directly the Fields, so I have:

var startdt = new Ext.form.DateField({
       fieldLabel: 'Start Date',
       width: 175,
       name: 'startdt',
       id: 'startdt',
       vtype: 'daterange',
       endDateField: 'enddt' // id of the end date field
});
var enddt = new Ext.form.DateField({
    fieldLabel: 'End Date',
    width: 175,
    name: 'enddt',
    hideLabel: false,
    id: 'enddt',
    vtype: 'daterange',
    startDateField: 'startdt' // id of the start date field
});

But the labels don't appear. Is there any way to make them appear or I'm doing this in a wrong way?


Thanks,
Pau

[Condor]

Labels are not rendered by the fields, but by the container with layout:'form'.

(so you needed to change your inner form to a panel with layout form)

[paubach]

Thanks Condor.

But the problem is that I need to render inside a form.
If I use a form panel I get an error for having a form inside another form. (And I've been 2 days to find this... ).

Do you have any other idea?

<table align='center' style='margin:5px;' width='98%'>
        <form name='eu_form' id='eu_form' action="/cgi-bin/bin/webspeed_OE10.pl/cap_eu_browse_grid.html" target="aux" method="get" onSubmit='incidentCounter= 0; incidentList= new Array; testData(); grid.loadMask.show();'>
         <tr>
          <td colspan='3' class="subtitlebluedk" align=center><div id="searchMsg">Your search: </div>
        </td>
      </tr>
      <tr>
          <td class='text' width='33%' valign='top' style='padding-right:50px;'>
                <div id='dr'></div>
                <input type="hidden" id="start_date" name="start_date" value="" />
                <input type="hidden" id="end_date" name="end_date" value="" />
            </td>
                 <td class='text' align='center' width='33%'>
                <select class='input' size='4' name='eu_table' id='eu_table' onchange="                    document.getElementById('EUN').value=this.options[this.selectedIndex].text.substr(0,8);">
                </select>
                <input type="hidden" id="EUN" name="EUN" />
                </td>
                <td class='text' align='left' width='33%' valign='top' style='padding-left:100px;'>
                Results to display on screen:<br />
                <select id='Incidents_On_Screen' class='input' onchange='if(version!=2) { pageSize = parseInt(value); myToolbar.pageSize = parseInt(value); myToolbar.cursor = 0; myStore.load({params:{start: myToolbar.cursor, limit: myToolbar.pageSize}}); } else { updateGridV2reload('cap_dashboard_proxy.p'); } layOpts.page=value; setCookie('layCAP', getLayOpts());' name='Incidents_On_Screen' size='1'>
                <option value='50' selected=''>50 </option>
                <option value='100'>100 </option>
                <option value='150'>150 </option>
                <option value='*'>ALL </option>
                </select>
                </td>
            </tr>
            <tr>
          <td class='text' align='center' colspan='3'>
                <input class='bluedk' type='submit' value='Incident Log' />
                <input class='bluedk' type='button' value='Web Trends' disabled='' />
                <input class='bluedk' type='button' value='WebAccounts' disabled='' />
                </form>
                </td>
      </tr>
    </table>

[Condor]

Reread what I posted:
Don't use a FormPanel. Use a Panel with layout:'form'.

[paubach]

Upppps!!! Sorry. I though using formPanel and Panel with layout : 'form' would be the same.

It finally works. Thanks very much.

[abhilashca]

Don't use a FormPanel. Use a Panel with layout:'form'.

That saved me a lot.
Thanks

[MEDOR DEV 1]

Thanks for this solution.

But how do you get the form object (in order to validate it, get fields value, submit it, etc...) of a panel ??