View Full Version : [INFOREQ] setClosable fails on IE8

22 Jun 2015, 9:48 PM

When I use the setClosable on a Tab it fails on IE8 with "Invalid source HTML for this operation". This is caused by adding the close tool as an "a" element while the tab hierarchy already contains an "a" element which is not allowed in IE8.

When setting the closable property initially the tool is rendered using a "span" which is Ok.

Any ideas for a workaround?


Gary Schlosberg
23 Jun 2015, 5:02 AM
Thanks for the report. Can you please post a test case which reproduces this issue?

23 Jun 2015, 7:25 AM
Forgive me, I'm a newbie..

When I try to create a sample code the tabs are wrapped in a table element in IE8 and a span element in other browsers (Chrome, IE11..). However, in my application the tabs are wrapped with span in IE8 as well.

What could be the reason for that?

Gary Schlosberg
24 Jun 2015, 8:33 AM
I'm not sure why there'd be a difference between your test case and application. With what specific version of Ext JS are you seeing this?

24 Jun 2015, 11:40 PM
The version I'm using is

I created a simple test case here:

couple of things I noticed:
1. When setting closable: true on the tool attributes the close tool is using a span to render but when using setClosable(true) it is rendered with anchor element.
2. In Chrome and IE11 the tab hierarchy includes only spans but in IE8 it includes a table as well.
3. In my application the IE8 tab is constructed the same as Chrome/IE11 and not using the tables

I believe all of the above relates to IE8 eventually throwing the "Invalid source HTML for this operation" when I call setClosable(true)

Gary Schlosberg
25 Jun 2015, 3:46 PM
With which version of Windows are you seeing this error? I haven't been able to recreate this, whether with 4.2.1 (like your test case), or 4.2.3, which you mentioned. I tried within your Fiddle and outside of Fiddle as well. Any suggestions for reproducing this?

26 Jun 2015, 12:02 AM
I'm seeing this error on Windows 7 64bit

Which part are you not able to recreate? Are the differences between IE8 and other browsers expected? Because the problem is that in my application, as opposed to the fiddle example, I don't see those differences.

How does Ext decides on the correct hierarchy (tables vs. spans)? Anything I should check in my application?

Gary Schlosberg
26 Jun 2015, 2:53 PM
I was testing for the error message you described, using a 32-bit Windows 7. It would not be surprising that IE8 would trigger different rendering considering how it often needs special treatment. I'll see if I can find an IE8/Win-64bit system on which to test.

1 Jul 2015, 12:34 AM
I would also expect IE8 to render differently. The thing is that in my application it doesn't (IE8 renders the same as IE11 or Chrome) which causes the bug. I wasn't able to reproduce the same behavior as in my application in a fiddle.