Question

Shortcuts:
EXT = Ext JS 4 application
ASP = Asp.Net MVC3 application

I have a problem in loading the images set in the view of an Ext JS 4 application. The application is part of an Asp.NET MVC 3 project. In my EXT folder i have the classic structure of Sencha MVC application. In the ASP project, EXT folder is situated in : root + “/Sencha/WebClient/”.
In the view of EXT I set the path to an icon of a button like this:

icon: 'images/common/desktop/btnStart.png'

The image doesn’t load because I think the .js file executes in the ASP view folder. I have set appFolder to “/Sencha/WebClient/” in order for the EXT to find the views, controllers, etc but the icon path still remains ‘images/common/desktop/btnStart.png’ instead of “/Sencha/WebClient/images/common/desktop/btnStart.png”.

Is there any solution to resolve this problem?

Answer 1

It won’t working that way. Icon property applied as css style. I suggest in the DOM it looks like

style="...; background-image: url(images/common/desktop/btnStart.png);"

so it does no matter where js scripts is placed. This image path is relative to the url of the current page, so this style won’t be applied as expected. But if you specify absolute path it will work.

I can advise you to use sass/scss + compass, and use css classes insted of using images paths. You can setup your images path and more over use mixins that will apply background images you specify

@mixin backgroundImage($img) {
    $imagesRoot: '/Sencha/WebClient/images/';
    @include background-image($imagesRoot + $img);  
}

.btnStart {
    @include backgroundImage('common/desktop/btnStart.png');
}

Then in the button configuration use

iconCls: 'btnStart'