`

Ext.BLANK_IMAGE_URL 的作用

ext 
阅读更多

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

分享到:
评论

相关推荐

    extjs3.2api中文

    "BLANK_IMAGE_URL"是ExtJS中的一个常量,它通常被用作一个占位符图像的URL。这个1×1像素的透明图片在JavaScript和CSS中起到了关键作用。在Web开发中,有时需要一个不可见的图像来作为某些元素的默认值或占位符,...

    ext常用注释

    在Ext框架中,`Ext.BLANK_IMAGE_URL` 是一个非常重要的属性,它用于指定默认的图像路径。例如: ```javascript Ext.BLANK_IMAGE_URL = basePath + "common/ext3.1/resources/images/default/s.gif"; ``` 这里通过...

    Ext.Tree.Panel

    - `Ext.BLANK_IMAGE_URL`通常用于设置占位符图片的URL,防止因图片未加载而出现的错误图标。 - `TreeLoader`对象用于从服务器加载树节点数据。可以设置`dataUrl`属性指定数据源,也可以在加载前的事件中动态设置。...

    Extjs 常用属性

    `Ext.BLANK_IMAGE_URL`是一个预定义的属性,用于指定一个空白图像的URL,这个图像通常用于占位符或解决CSS中背景图像加载延迟的问题。在这个例子中,`Ext.BLANK_IMAGE_URL='scripts/ext/resources/images/vista/s....

    EXT_JS实用开发指南_个人整理笔记.docx

    EXT_JS的`Ext.BLANK_IMAGE_URL`常量用于设置空白图片路径,以避免某些浏览器在处理图像时出现问题。 2. **应用启动与`Ext.onReady`**:EXT_JS应用通常从`Ext.onReady`函数开始执行,这个函数会在DOM加载完成并且EXT...

    ext教程1.pdf

    `Ext.BLANK_IMAGE_URL` 是EXTJS 为某些组件(如树形控件)设置的占位符图像URL。 EXTJS 应用程序的启动通常从`Ext.onReady` 函数开始。这个函数会在DOM加载完成后执行,确保在操作DOM元素时页面已经完全准备就绪。...

    Ext Js权威指南(.zip.001

    2.5 关于ext.blank_image_url / 40 2.6 关于字体 / 42 2.7 ext js 4语法 / 42 2.8 本地化 / 60 2.9 为本书示例准备一个模板 / 60 2.10 本章小结 / 61 第3章 调试工具及技巧 / 62 3.1 使用firebug进行调试 / ...

    ExtJS教程.pdf

    为了解决这个问题,可以在自己的代码中设置`Ext.BLANK_IMAGE_URL`为本地的图片路径。例如,在`examples.js`文件中可以看到设置如下: ```javascript Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif'...

    grid js 例子一个 ext 的

    - **Ext.BLANK_IMAGE_URL**:设置 Ext JS 的默认空白图片路径。 - **Ext.QuickTips.init()**:初始化快速提示功能。 - **CheckboxSelectionModel**:创建一个复选框选择模型,允许用户多选行。 - **ColumnModel**:...

    EXT开发过程中的心得

    - 在使用EXTJS时,需要特别注意`Ext.BLANK_IMAGE_URL`这个配置项,它指向一个1x1像素的透明图片(通常为`s.gif`)。此设置对于确保应用的统一外观至关重要,尤其是在处理不同分辨率下的显示问题时。 3. **IE浏览器...

    Extjs学习笔记

    Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif'; Ext.onReady(function() { Ext.MessageBox.alert('Hello', 'Hello world'); }); ``` 在上面的代码中,我们首先引入了 ExtJS 的核心文件,然后...

    extjs之去除s.gif的影响

    Ext.BLANK_IMAGE_URL = "&lt;%=response.request.getContextPath()%&gt;/js/Ext/resources/images/default/s.gif"; ``` 这条语句的作用是将EXTJS框架中用于占位的空白图像URL设置为当前应用的路径,这里的`&lt;%=response....

    ext2.0中文语言包gb2312格式

    Ext.BLANK_IMAGE_URL = 'path/to/blank.gif'; Ext.UpdateManager.defaults.indicatorText = '加载中...&lt;/div&gt;'; Ext.QuickTips.init(); Ext.util.Format.defaultDateFormat = 'Y-m-d'; // 引用中文语言包 Ext...

    php.ini-development

    url_rewriter.tags ; Default Value: "a=href,area=href,frame=src,form=,fieldset=" ; Development Value: "a=href,area=href,frame=src,input=src,form=fakeentry" ; Production Value: "a=href,area=href,frame=...

Global site tag (gtag.js) - Google Analytics