现在的位置: 首页 > 综合 > 正文

配置 Ext.BLANK_IMAGE_URL 的原因(转载)

2013年09月01日 ⁄ 综合 ⁄ 共 854字 ⁄ 字号 评论关闭

在分析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文件中定义的装饰图标。

抱歉!评论已关闭.