ExtJS 4 MVC应用程序在asp.net MVC 3项目中的镜像路径问题

Question

快捷方式：EXT=EXT JS 4应用程序ASP=ASP.Net MVC3应用程序

我在加载ExtJS 4应用程序视图中设置的图像时遇到了问题。该应用程序是Asp.NET MVC 3项目的一部分。在我的EXT文件夹中，我有Sencha MVC应用程序的经典结构。在ASP项目中，EXT文件夹位于：root+"/Sencha/WebClient/"中。在EXT视图中，我设置了一个按钮图标的路径，如下所示：

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

图像没有加载，因为我认为.js文件在ASP视图文件夹中执行。我已将appFolder设置为"/Sencha/WebClient/"，以便EXT查找视图、控制器等，但图标路径仍然保持为"images/common/desktop/btStart.png"，而不是"/Sencha/WebClient/images/common/deskop/btStart.png"。

有解决这个问题的办法吗？

Answer 1

那样是行不通的。图标属性应用为css样式。我建议在DOM中它看起来像

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

因此，无论js脚本放在哪里都可以。此图像路径相对于当前页面的url，因此不会按预期应用此样式。但如果您指定了绝对路径，它将起作用。

我可以建议您使用sass/scss+compass，并使用css类来代替使用图像路径。你可以设置你的图像路径和更多过度使用的混合，将应用你指定的背景图像

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

然后在按钮配置中使用

iconCls: 'btnStart'