1. #1
    Ext JS Premium Member paubach's Avatar
    Join Date
    Jan 2008
    Location
    Plasencia, Spain
    Posts
    337
    Vote Rating
    0
    paubach is on a distinguished road

      0  

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

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


    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:
    Code:
    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)

    Code:
        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

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,498
    Vote Rating
    46
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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:

    Code:
        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

    Code:
        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;
        },

  3. #3
    Ext JS Premium Member paubach's Avatar
    Join Date
    Jan 2008
    Location
    Plasencia, Spain
    Posts
    337
    Vote Rating
    0
    paubach is on a distinguished road

      0  

    Default


    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);
    }
    Attached Images

  4. #4
    Ext JS Premium Member paubach's Avatar
    Join Date
    Jan 2008
    Location
    Plasencia, Spain
    Posts
    337
    Vote Rating
    0
    paubach is on a distinguished road

      0  

    Default


    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:

    Code:
    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

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    87
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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)

  6. #6
    Ext JS Premium Member paubach's Avatar
    Join Date
    Jan 2008
    Location
    Plasencia, Spain
    Posts
    337
    Vote Rating
    0
    paubach is on a distinguished road

      0  

    Default


    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?

    Code:
    <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>

  7. #7
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    87
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

  8. #8
    Ext JS Premium Member paubach's Avatar
    Join Date
    Jan 2008
    Location
    Plasencia, Spain
    Posts
    337
    Vote Rating
    0
    paubach is on a distinguished road

      0  

    Default


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

    It finally works. Thanks very much.

  9. #9
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    55
    Vote Rating
    1
    abhilashca is on a distinguished road

      0  

    Default


    Quote Originally Posted by Condor View Post
    Don't use a FormPanel. Use a Panel with layout:'form'.
    That saved me a lot.
    Thanks

  10. #10
    Sencha User
    Join Date
    Jun 2012
    Posts
    1
    Vote Rating
    0
    MEDOR DEV 1 is on a distinguished road

      0  

    Default


    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 ??