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)