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):
The following error will be reported in IE,:
Dummy Text to case Error
There has no error reported in Firefox.Error: Object doesn't support this property of method
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.
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.var range = el.ownerDocument.createRange();
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,