Ext.BLANK_IMAGE_URL

最新推荐文章于 2021-03-22 10:56:17 发布

最新推荐文章于 2021-03-22 10:56:17 发布 · 171 阅读

文章标签：

#EXT #CSS #网络应用 #Firefox #JavaScript #ViewUI

ExtJS 专栏收录该内容

40 篇文章

订阅专栏

相信各位读者在学习Ext官方示例的时候，会发现每个例子都会引用examples.js。examples.js文件中的第一句就是：

Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

这是一句将图片地址赋给Ext.BLANK_IMAGE_URL变量的语句。单单看这句话看不出有什么特殊，下面我们看Ext源代码GridView.js中的语句，来学习Ext.BLANK_IMAGE_URL的真正含义。

JavaScript代码清单10-1-1

if (!ts.hcell) {

ts.hcell = new Ext.Template(

'<td class="x-grid3-hd x-grid3-cell x-grid3-td-{id}" style="{style}">'

+ '<div {tooltip} {attr} class="x-grid3-hd-inner x-grid3-hd-{id}"

unselectable="on" style="{istyle}">',

//判断grid是否启用了菜单

this.grid.enableHdMenu

? '<a class="x-grid3-hd-btn" href="#"></a>'

: '',

'{value}<img class="x-grid3-sort-icon" src="', Ext.BLANK_IMAGE_URL, '" />',

"</div></td>");

}

这段代码是生成Grid的列标题，通过模板动态生成列标题的样式，并定义列标题的排序图标。通过章节开始的那句赋值语句我们就应该知道排序图片是指向‘../../resources/ images/default/s.gif’，s.gif是一个空白的图片，意思是列标题在没有进行排序的情况下默认不显示任何图片，通过运行Ext官方示例Editor Grid Example在FireFox下面查看最终源代码会更加清楚，如图10.1中的红框处所示。

图10.1 最终的源代码

那么可以说明，排序图标是需要动态创建的，在点击Grid的列标题进行排序的时候，Ext会动态地修改CSS来设置图片修饰组件<img>的src属性，来实现图片的动态加载。

这样可以看出，Ext在对一些需要应用图片的地方，都没有显式地写明要应用的图片路径，而都是通过CSS来动态配置，许多应用图片的地方刚开始都使用Ext.BLANK_IMAGE_URL来替代，而在CSS加载之后就会替换到真实的图片路径。另外Ext.BLANK_IMAGE_URL在Ext默认的值为：

BLANK_IMAGE_URL : "http:/"+"/extjs.com/s.gif"

这是连接官方Ext网站的图片，这样如果您的图片在网络不通的情况下会显示一个红叉，所以还是建议在实际应用中将Ext.BLANK_IMAGE_URL设置为本地引用。最后还经过实践证明，如果没有正确地配置Ext.BLANK_IMAGE_URL，可能在许多控件上显示不了CSS文件中定义的装饰图标。

Ext软件包下面的Resources文件夹放置了Ext所需的全部资源文件，包括样式表(css)、图片等，但唯一不包括的一张图片是像素1 * 1的透明GIF文件，为什么这张图片如此特别，需要另作处理呢？我们先从网页的背景图制作方法说起——这是在前端设计中一种非常有用的处理手段。

Ext样式精粹

一般情况下，在HTML页面中插入图片很简单，直接定义Img元素的src属性即可：

渐渐地，人们意识到这样更换样式的同时需要修改HTML文件(仅仅是修改img元素的引用地址)，不如修改CSS文件方便，不会涉及HTML结构有影响小的特点，于是一个空白图片做占位符号，然后用CSS文件里配置的背景图片做显示，这样有利于更换主题。上面的代码变为HTML和CSS两种：

HTML:

CSS:

#image {

height: 30px;

width: 50px;

background-image:url(../images/index.gif);

}

此时的div元素中的innerHTML属性为空，即不包含任何字符。问题出现这里了，我们不能直接给div元素套上link元素，否则不能建立连接或div出现异常，如这里给出的一个错误的用法，见源码10-1-1。

源码10-1-1 (错误的用法)

<style>

#image {

height: 30px;

width: 50px;

background:blue;

}

</style>

</a>

要可靠地为div元素加上连接，同时也希望利用CSS配置的背景图片，可以利用一种折中但有效的方法，在a元素中包含一个透明的GIF图片，该图片大小为1 * 1像素，IMG元素的尺寸大小就按照实际显示的大小设置。IMG此时的作用不是显示要显示的图片，而是让透明的图片不断地被填充，达到不影响背景图片而又设置大小尺寸的效果。

不过，此时我们距离真正解决问题还差一步之遥。因为这个IMG元素不能够以背景图(在CSS里面)的方式引用那个1 * 1的透明图片。IMG元素本来的用途是显示图片，再加入背景图岂不是多此一举，因此在W3C(HMTL标准制定者)的规范中，IMG元素是不存在背景图的属性或相关设置方法的。如此一来，我们便不能遵从CSS文件路径的定位标准去定义这个透明图片(CSS与HTML路径各自成独立体系)，好在这只是唯一需要我们设置的地方，一次定义正确，整个Ext库都能引用这个图片路径。

CSS图片拼合(CSS sprites)可有效降低图片文件的HTTP连接请求数。多个图片将以一定间距合并为一个大图片文件。页面中使用这些图片的元素将利用background-position这一CSS属性来显示拼合图片中的指定位置。就好比手表上的日期，你今天看到的是21，明天看到的是22，是因为它的位置往上跳了一格。

总地来说，将几张图片合成一个大图，并给出CSS座标，这就是CSS Sprites的精粹所在，也是Ext制作皮肤的总体思路。

这一技术可有效提升网站的性能, 尤其是网页上有众多小图片时——如许多菜单栏图标。Yahoo!首页是使用此技术的一个实例。