在分析ExtJS的源码时,对为什么要在Ext中配置BLANK_IMAGE_URL属性不知所以然。后来也没有刻意对着一细节做研究,大有要不了了之的倾向... ...
不过最近在看Ext中jack的window导航式例时,看到一个细节,让我顿时明白了作者的这一做法的初衷。
作者在对一些需要应用图片或者图标的地方,都没有显式写明要应用的图标(片)路径,而都是通过css来配置,许多应用图标的地方刚开始都Ext.BLANK_IMAGE_URL来替代,而在css在加载之后就会替换到真实的图标路径 。这一招就彻底解决了界面的换肤问题。
看个例子:
在desktop例子中,快捷方式图标的初始路径是指向空白的images/s.gif
<dl id="x-shortcuts">
<dt id="grid-win-shortcut">
<a href="#"><img src="images/s.gif" />
<div>Grid Window</div></a>
</dt>
</dl>
然后,在css中修改为:
#grid-win-shortcut img {
width:48px;
height:48px;
background-image: url(../images/grid48x48.png);
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/grid48x48.png', sizingMethod='scale');
}
有些需要图标修饰的组件在动态创建时,图标的src一般都是指向Ext.BLANK_IMAGE_URL ,然后呢,再在css指向特定的图标位置。
然后以后要换肤的话,直接替换css文件就可以了。
最后实践也证明,如果没有正确配置这个BLANK_IMAGE_URL,可能在许多控件上显示不了css文件中定义的装饰图标。