2.5 关于Ext.BLANK_IMAGE_URL
在Ext-more.js文件中可找到BLANK_IMAGE_URL属性的默认值和定义。其默认值是：
BLANK_IMAGE_URL : 'data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='
定义是：
BLANK_IMAGE_URL : (isIE6 || isIE7) ? 'http:/' + '/www.sencha.com/s.gif' : 'data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='
代码中以“data”开头的数据代表一个1*1像素的空白透明图片。因为IE 6和IE 8不支持这样格式的图片数据，所以必须为它指定一个图片路径，默认指向http:///www.sencha.com/s.gif。
这个图片有什么用呢？在菜单项的源代码（Item.js）中可找到菜单项的渲染模版代码：
renderTpl: [
'<tpl if="plain">',
'{text}',
'</tpl>',
'<tpl if="!plain">',
'<a class="' + Ext.baseCSSPrefix + 'menu-item-link" href="{href}" <tpl if="hrefTarget">target="{hrefTarget}"</tpl> hidefocus="true" unselectable="on">',
'<img src="{icon}" class="' + Ext.baseCSSPrefix + 'menu-item-icon {iconCls}" />',
'<span class="' + Ext.baseCSSPrefix + 'menu-item-text" <tpl if="menu">style="margin-right: 17px;"</tpl> >{text}</span>',
'<tpl if="menu">',
'<img src="' + Ext.BLANK_IMAGE_URL + '" class="' + Ext.baseCSSPrefix + 'menu-item-arrow" />',
'</tpl>',
'</a>',
'</tpl>'
],
在上面的代码中，Ext.BLANK_IMAGE_URL被用作显示图片。哈哈，有点想不通为什么用1个1*1像素的空白图片来作显示图片吧。别着急，看看它的CSS代码就清楚了。在ext-all-debug.css文件可找到有关“menu-item-arrow”的代码：
.x-menu-item-arrow {
position: absolute;
width: 12px;
height: 9px;
top: 9px;
right: 0px;
background: url('../themes/images/default/menu/menu-parent.gif') no-repeat center center;
}
真相出来了，Ext.BLANK_IMAGE_URL只是一个占位符，目的是显示背景图片。这样做主要有以下两个目的：
在更换主题时如果图片是固定的，有两种方法更新图片，一种是覆盖旧图片，一种是重新定义图片路径。在你固定主题的情况下，覆盖图片的方法是可行的，但如果要由用户自定义主题就不行了。重新定义图片的方法不但增加开发人员工作量，而且也不能实现用户自定义主题功能。使用这种方法，只需要在CSS中指定背景图片就行了，既不需要覆盖图片，也不需要去重新定义图片路径，非常方便实用。
如果使用div标记或span标记代替img标记，那么在这两个标记外增加链接的时候，因为标记内的内容为空，所以链接就会出现问题。如果在div或span内加入空格呢？问题依旧一样，而且还会因为空格造成背景图片难于定位。有兴趣的可以自己做一下测试。
明白了Ext.BLANK_IMAGE_URL的作用，回头再研究一下2.3节的示例中有关Ext.BLANK_ IMAGE_URL的三行代码。因为当浏览器是IE 6或IE 7时，图片地址会指向http:///www.sencha.com/s.gif，如果访问不了Sencha网站，就会出现显示问题，所以需要将地址指向本地地址。如果不是IE 6或IE 7，那么使用默认值就可以了。
