10.2 实时换肤功能
在本章的开始,我们已经谈到了实时换肤功能。大家应该都熟悉目前很流行的聊天工具如腾讯的QQ,微软的MSN,我们都可以根据自己的喜好来更换自己 的皮肤颜色,更换后,整个聊天工具的面板都会变为你选择的颜色,所见即所得,非常方便。在应用系统中,如果能够实现系统的实时换肤功能,那么无疑会为你的 应用增添一个有力的竞争手段。
实时换肤功能的实现原理是什么呢?在Ext中,主要是使用CSS与图片来控制界面组件的外观。CSS文件与图片文件都位于Ext框架中的resources文件夹下面,resources文件夹内分别有css与images两个文件夹。
如图10.2所示,我们来看一下css文件夹内的文件结构。
图中,从每个CSS文件的命名就可以看出每个文件的作用,如panel.css是用于渲染panel组件的外观,而form.css则用于渲染 form表单的显示。打开panel.css查看其内部结构,可以发现其中大部分类涉及到的背景都引用自../images/default/panel /内的图片。那么可以发现,box、button、dd、editor、form、grid、layout、menu、panel、progress、 qtip、sizer、slide、tabs、toolbar、tree、window的CSS文件在images文件夹内都有其对应的图片,这就是说, 如果你要对如window这个组件的外观进行改变的话,只需要改变CSS文件与其对应的图片就可以了。当然,要改变组件的样式也可以在 JavaScript程序代码中进行设置,这里讲的方法主要是为了后面的换肤与制定Ext提供基础。
我们在开发Ext程序时,往往会在HTML文件中引用ext-all.css, 这个文件比较大,其中包含了图10.2中除被红框选中的xtheme-gray.css的所有文件。
![]() |
图10.2 css文件夹内的文件结构 |
![]() |
1. 静态换肤
Ext中,默认的主题为蓝色主题,Ext自己还扩展了一个灰色主题,此主题的实现主要在xtheme-gray.css文件中,这样我们就可以实现对Ext的静态换肤功能。可以像下面这样做。
HTML代码清单10-2-1
<link rel="stylesheet" type="text/css" |
这样灰色主题就会在系统加载后覆盖Ext的默认设置,应用于Ext各个组件中。
2. 动态换肤
我们还可以在系统中进行动态换肤,也就是所说的实时换肤功能。
HTML代码清单10-2-2
<script type="text/javascript"> <body> |
该例中使用到了Ext中Css工具类的swapStyleSheet方法,此方法是实现换肤功能的核心,它的实现逻辑并不复杂,我们看一下它的源代码。
JavaScript代码清单10-2-3
//JavaScript代码清单10-2-3 |
从代码中可以看出,swapStyleSheet可以根据不同的url来设置相应的css文件,以设置系统的主题。