参见《Ext JS 权威指南》
ExtJS4可以结合SASS和Compass来创建自己的主题,再次简单介绍其使用方法。关于SASS和Compass参见其相关官网:http://sass-lang.com/和http://compass-style.org/
1.安装Ruby
使用SASS和Compass需要安装Ruby,到官网http://rubyinstaller.org下载安装,本例用的是“rubyinstaller-1.9.3-p551.exe”。
2.安装Compass
Compass由SASS的核心团队成员Chris Eppstein创建,是一个非常丰富的样式框架,包括大量定义好的mixin,函数,以及对SASS的扩展。在“开始”菜单下单击“Start Command Prompt with Ruby”,安装“0.11.5”版本,命令行输入“gem install compass –v0.11.5”
安装以后可以用命令“compass -v”查看版本
3.安装SASS(版本3.1.7)
在命令行输入“geminstall sass –v3.1.7”,安装成功后可以使用命令“sass -v”查看版本。
4.ExtJS目录结构
主题的编译过程所对应的目录结构要求比较严格。编译过程是以网站跟目录或者应用根目录为基准,如下图:
ExtJS文档下放置的是相关的js,resources以及下面的主题样式。ExtJs\resources\themes下的compass_init.rb必须存在,ExtJS\resources\themes\stylesheets\ext4\defaul下面都是.scss文件存放Extjs组件相关的样式变量。和ExtJS文档同级的的resources文档下面有三个文档。Nicole\WebRoot\resources\images是由Nicole\WebRoot\ExtJS\resources\themes\images复制得来。
(2)修改配置文件
修改Nicole\WebRoot\resources\sass\config.rb文件,配置 Ext JSSDK对应项目的路径
修改Nicole\WebRoot\resources\sass\my-ext-theme.scss文件,该文件是主题的模本文件,通过修改可以对主题进行配置。
5.编译
打开Ruby的命令提示窗口,将目录切换到项目的目录下,如本例“E:\testwork\Nicole\WebRoot\resources\sass”在窗口输入“compass compile”,可以看到Nicole\WebRoot\resources\css\下生成一个my-ext-theme.css文件。在项目中引用这个文件就可以了。