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

**JamesMa** · 27 Sep 2008 10:59 AM

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

**Condor** · 27 Sep 2008 12:34 PM

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>

**JamesMa** · 28 Sep 2008 12:52 AM

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

**evant** · 28 Sep 2008 4:28 AM

I wouldn't think so, it's a pretty specific case and it probably won't occur that often.

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

Thread Tools

Search Thread

Display

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

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

DUP

DUP