View Full Version : Split DOM: what triggers ExtJS to generate buttons in a <table> vs <div>

27 Jan 2013, 8:59 AM
I'm working with an alternative theme and have encountered a problem when it used in IE 7. When the ExtJS default theme is used in in FF, Chrome, IE 9/10 it generates <button> in a <div>. However when used in IE 7 it generates <buttons> within a <table>. This is important.

However when my theme is used in IE 7 ExtJS generates <button> within a <div> not <button> within a <table>. The consequence is that any button with just an icon (without any text) is rendered at 100% of the available width of the container (for example, a toolbar).

In this post, Ed Spencer confirms there are two layout generated by ExtJS.

What trigger does ExtJS use to generate a table or not. It can't be the browser because the rendering is different in the same browser. The only difference being the theme used.

Below are three screenshots to show the difference. Each shows the same toolbar and buttons from an ExtJS app. The first uses my theme rendered in FF (as it should be rendered). Here, ExtJS generates <div> and <button> elements. The second shows the same content rendered using the default ExtJS theme in IE 7. It looks OK because ExtJS generates <table> and <button>. The third shows the same content rendered using my theme in IE 7. As you can see it fails miserably because the buttons are rendered to the left. This occurs because something about the theme causes ExtJS to render using <div> elements not <table> elements. Why?

FF + my theme = OK

IE 7 + ExtJS default theme = OK

IE 7 + my theme = NOT OK (buttons squashed to the left)

27 Jan 2013, 5:17 PM
It renders that way because oldIE doesn't support border-radius. To get rounded corners in modern browsers is pretty trivial, in older browsers you have to render the old ugly wrapping table and generate images for the corners.

27 Jan 2013, 5:25 PM
Hi Evan

I know why ExtJS uses two different rendering schemes. What I meant to ask is what triggers ExtJS to render buttons using tables vs divs. It cannot be as simple as the browser being used. When using IE 7 and the ExtJS default theme, ExtJS renders using tables. When I use my theme (same app, same IE 7) ExtJS renders using divs. You can see this in the images in the original post.

What am I missing from my theme that make ExtJS think it is OK to generate using divs? What should I being looking to add so that ExtJS will render using a table?


Bill Seddon

27 Jan 2013, 5:36 PM
Sorry, I misread.

Have a look at Ext.util.Renderable::calculateFrame.

The css comes from frame.scss, around line 120.

27 Jan 2013, 5:52 PM
Thanks. I think that makes sense. It seems I need to find out why my theme is not generating the information needed to have the rendering mechanism use the 'frameTableTpl' template.