Ext.BLANK_IMAGE_URL 的作用 原因 配置 使用 实例

 

在使用ExtJS时，我们往往需要在使用之前加入这么一句：
Ext.BLANK_IMAGE_URL = "....."其中省略部分为s.gif在extjs包中的路径。
那么ExtJS为什么要设置这样一个变量呢？如果我们不这样做会带来什么后果？
首先说后果：
如果没有以上那句代码，Ext会按照默认的地址：http://www.extjs.com/s.gif去下载这张图片，由于网络不通或者速度较慢等原因，可能导致这张图片加载不成功，造成页面上很多小白条。
设置这个变量的原因：
原来ExtJS中在创建组件的时候，组件中需要替换图标的地方，初始化时都是拿这个s.gif替代的，如果用户指定icon属性，它会将s.gif替换为icon的地址，说白了，s.gif就是一个占位的功能。
另外，如果看过ExtJS的源代码可能发现，它对于ie和air的默认实现是去url请求这张图片，而对于其它浏览器则直接使用图片解码，这是因为ie和air不支持图片解码。

----------------------------------------------------------------------------------------------------------

Ext.BLANK_IMAGE_URL

图片位置默认指向：
/resources/images/default/s.gif'

 

最近在看Ext中jack的window导航式例时，看到一个细节，让我顿时明白了作者的这一做法的初衷。
作者在对一些需要应用图片或者图标的地方，都没有显式写明要应用的图标（片）路径，
而都是通过css来配置，许多应用图标的地方刚开始都Ext.BLANK_IMAGE_URL来替代，
而在css在加载之后就会替换到真实的图标路径 。
这一招就彻底解决了界面的换肤问题。
看个例子:
在desktop例子中，快捷方式图标的初始路径是指向空白的images/s.gif
<dl id="x-shortcuts">
 <dt id="grid-win-shortcut">
  <a href="#" mce_href="#">
   <img src="images/s.gif" mce_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文件中定义的装饰图标。