View Full Version : [INFOREQ] IE8 theme issues due to missing resources\images\btn

28 Jul 2015, 2:35 PM


Ext version tested:

Ext 6.0.0 rev 640
Browser versions tested against:

IE 8
DOCTYPE tested against:

IE 8 Standards

for IE 8 background images are being used to render the widgets properly. For Buttons there is a folder named as btn where theme-all CSS looks for images. This folder is missing from all themes provided with ExtJS 6 download.
Steps to reproduce the problem:

open the Fiddle in IE 8
The result that was expected:

look and feel should be same as in Chrome and other CSS 3 supported browsers
The result that occurs instead:

no images loading resulting into ugly look.

copy the btn folder from ExtJS 5 for each theme into ext-\build\classic\theme-?????\resources\images
I am seeing this issue for grid and button, It might be there for other widgets as well which I have not tested yet.


Gary Schlosberg
28 Jul 2015, 2:53 PM
Thanks for the report. Can you please post a test case which reproduces this issue?https://fiddle.sencha.com/#home

28 Jul 2015, 3:03 PM

1 Sep 2015, 5:31 AM
Having same problem when I build my custom theme.

sencha package build

Small example is to open next link in IE8 or IE9:


See that buttons and framed panel headers have missing images (that should be generated durring slice images process).

However when I build the the app (to demo the package, I need to generate the theme only, to be used separatly), slice images are generated.

copy images generated from app build into package build.

sencha app build classic production
cd packages/custom-theme
sencha package build
xcopy ..\..\build\production\my-app\classic\resources\images build\resources\images /s /e /y

short examples for fiew file added from:

> git status
new file: packages/custom-theme/build/resources/images/btn-group/btn-group-default-framed-corners.gif
new file: packages/custom-theme/build/resources/images/btn/btn-default-large-corners.gif
new file: packages/custom-theme/build/resources/images/btn/btn-default-medium-sides.gif
new file: packages/custom-theme/build/resources/images/btn/btn-default-small-corners.gif
new file: packages/custom-theme/build/resources/images/btn/btn-default-small-sides.gif
new file: packages/custom-theme/build/resources/images/btn/btn-plain-toolbar-small-pressed-sides.gif
new file: packages/custom-theme/build/resources/images/btn/btn-primary-small-corners.gif
new file: packages/custom-theme/build/resources/images/btn/btn-primary-small-sides.gif
new file: packages/custom-theme/build/resources/images/grid-row-editor-buttons/grid-row-editor-buttons-default-bottom-corners.gif
new file: packages/custom-theme/build/resources/images/panel-header/panel-header-default-framed-bottom-corners.gif
new file: packages/custom-theme/build/resources/images/panel-header/panel-header-light-framed-top-sides.gif
new file: packages/custom-theme/build/resources/images/panel/panel-default-framed-sides.gif
new file: packages/custom-theme/build/resources/images/panel/panel-light-framed-sides.gif
new file: packages/custom-theme/build/resources/images/tab/tab-default-bottom-active-corners.gif
new file: packages/custom-theme/build/resources/images/tip/tip-default-sides.gif
new file: packages/custom-theme/build/resources/images/tip/tip-form-invalid-corners.gif
new file: packages/custom-theme/build/resources/images/window-header/window-header-default-bottom-corners.gif
new file: packages/custom-theme/build/resources/images/window/window-default-sides.gif