Ext4修改样式

 

本文借助于：http://www.cnblogs.com/1-2-3/archive/2011/07/31/ExtJs4-SASS-Custom-Theme.html

下面是我自己根据上述文章的实现：

Step1、下载ExtJs4的文件包： http://www.sencha.com/products/extjs/download

Step2、下载 Ruby。在 http://www.ruby-lang.org/en/downloads/ 页，如果你是 Windows 用户应该下载“Ruby on Windows” 节下的“Ruby 1.9.2-p180 RubyInstaller”。下载后将 Ruby 安装到 D:\Ruby192\。为方便使用Ruby命令行工具，安装时建议勾选“Add Ruby executables to your PATH”选项。

Step3、安装 Compass/SASS。打开 Windows 命令行，执行
gem install compass
安装后，可使用命令
compass -v
sass -v
检验是否已成功安装了 compass 和 sass。

Step4、在MyEclipse中新建一个Web工程，将Step1中下载的ExtJs4的文件解压，直接放到新建Web工程的WebRoot目录下。我的目录如下（因ExtJs4中有些文件不需要所以就删除了，也可以不用删除，没太大影响，如果不确定哪些是不要的可以不删除）：

Step5、将extjs-4.1.0\resources\themes\templates\resources文件夹复制到WebRoot目录下，将extjs-4.1.0\resources\themes\images\default文件夹复制到WebRoot\resources目录下，并将default重命名为images，之后的目录如下图所示：

由SASS生成CSS

Step6 、修改WebRoot\resources\sass\config.rb中的$ext_path变量，使其指向extjs根目录，这里指向extjs-4.1.0。

$ext_path = ".. /.. /extjs-4.1.0"

注意：如果你需要使用样式的项目中Ext的Ext文件的路径为什么这里就使用什么文件名。例如如果你需要使用样式的项目中为ext4，那么就将这里的extjs-4.1.0 重命名为ext4，总之尽量保证ext文件的文件名一致，如果你是在一个项目中测试就不需要考虑这个问题。要是不一致的话，生成css文件后，css文件中图片路径都找不到，需要将css文件中的路径全部修改回来。

Step7、修改WebRoot\extjs-4.1.0\resources\themes\lib\utils.rb中

images_path = File.join($ext_path, 'resources', 'themes', 'images', theme)
修改为
images_path = relative_path
这样 ExtJs 将使用 WebRoot\resources\images 下的图片而不是 WebRoot\extjs-4.1.0\resources 下的图片。

Step8 打开 Windows 命令行，进入 Scripts\resources\sass 目录下，执行命令
> compass compile
此命令会在 Scripts\resources\css 文件夹下生成 my-ext-theme.css 文件。

修改 $base-color 变量，查看效果

Step9 编辑 Scripts\resources\sass\my-ext-theme.scss，在 “@import 'ext4/default/all';” 这一行之前插入一行
 $base-color: #a1c148;
注意 对变量的重新赋值的语句都应该放在 “@import 'ext4/default/all';” 这一行之前。

Step10 再次打开 Windows 命令行，进入 Scripts\resources\sass 目录下，执行命令
> compass compile
重新生成CSS文件。

step11、随便想一个实例将之前的ext-all.css用自己生成的css文件取代查看效果。

将生成的css文件取代之前项目中引用的css文件即可，在使用自定义生成的css文件放到自己的文件夹下，以免出现路径问题。我将生成文件使用到我系统中的图片如下（下面的是正式开发中的项目，并非上面新建的Web项目）：

 如果你希望修改更多变量的参数：可以在文件夹：WebRoot/extjs-4.1.0/resources/themes/stylesheets/neptune/default/variables中查看，然后自己修改