Hybrid View

  1. #1
    Ext User
    Join Date
    Sep 2008
    Posts
    2
    Vote Rating
    0
    JamesMa is on a distinguished road

      0  

    Default [2.2][DUP][CLOSED] ComboBox in IE

    [2.2][DUP][CLOSED] ComboBox in IE


    I found that if the HTML page contain some text before the <div> where we render the FormPanel with ComboBox, it will cause error when you click on the ComboBox field to expand the selection list.

    For example (the Ext.FormPanel has renderTo:'formPanel):
    :
    :
    Dummy Text to case Error
    <div id='formPanel'></div>
    :
    The following error will be reported in IE,
    Error: Object doesn't support this property of method
    There has no error reported in Firefox.

    At first, I guess this may be my problem, I try to debug the program even including the ExtJS library. I found that the calling sequence of ExtJS is different between IE and FF, and the error is triggered in Ext.DomHelper, the insertHtml function.

    var range = el.ownerDocument.createRange();
    I have put a breakpoint here, I find that, in FF, it will be called when page load, but in IE, it will be called when the dropdown is clicked.

    In FF, el will refer to somewhere under the target div (in my testing, an x-panel object id = ext-comp-1001, maybe something generated by ExtJS). And the ownerDocument is the main document itself.

    But in IE, el will refer to the first text object in the document, and the ownerDocument does not have createRange() method.

    It's interesting that, if there does not have any text before the renderTo <div>, the breakpoint in Ext.DomHelper will not be triggered, so there will have not error reported.

    In fact, even there has error prompted in IE, everything works fine if you just ignore the error, the selection list displayed in correct position, and you can proceed to select the entry. I have also tried to comment out the statement "var range = el.ownerDocument.createRange();", everything works fine in my program, it seems that the Ext.DomHelper.insertHtml has no actual effect in this case.

    Would you please help to investigate the problem

    Thanks and regards,
    James MA

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    83
    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 DUP

    DUP


    This is a common problem in IE when the first element in the <body> is a text node (reported before here and here).

    The solution is to start your HTML <body> with a non-text node, e.g. an empty span:
    Code:
    <body>
      <span></span>
      Dummy text not causing an error
      <div id='formPanel'></div>
    </body>

  3. #3
    Ext User
    Join Date
    Sep 2008
    Posts
    2
    Vote Rating
    0
    JamesMa is on a distinguished road

      0  

    Default


    Thanks a lot!

    Will there be a fix in ExtJS to solve this problem in future relase (for example, in extjs-base.js, hard code to add a dummy element in top of body if IE detected)?

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


    I wouldn't think so, it's a pretty specific case and it probably won't occur that often.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Thread Participants: 2