定制ExtJS 4主题
在ExtJS 3中自定义主题相当复杂，可能需要探测每一个HTML元素，找到对应的CSS代码并修改，很多ExtJS 3组件使用了图片，可能需要手工修改这些图片才能满足新主题的配色需要。
ExtJS 4使用一些CSS3的特性来便利化主题定制，它是用了Sass、Compass，这些相关的工具可以在themes目录下找到。
到http://rubyinstaller.org/下载合适的版本并安装，也可以到ftp://ftp.ruby-lang.org/pub/ruby/binaries/mswin32/可以下载特定的Windows二进制版本。本文安装的是1.9.3版本，完成完毕后要设置好环境变量。
命令行输入：
|
1 2 3 4 5 6 |
gem install sass -v 3.2.5 gem install compass -v 0.12.2 rem 查看版本 compass -v sass -v |
创建一个Maven工程，名为ext-theme，把下载的ext-4.1.1-gpl重命名为extjs，放置到src/maven/webapp（以下称webapp）下，复制extjs/examples/themes/themes.js到webapp，并在同一目录新建一个HTML文档，内容如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Ext JS 4 Themes</title> <!-- 下面是我们即将创建的自定义主题的样式表文件 --> <link rel="stylesheet" type="text/css" href="resources/css/my-ext-theme.css" /> <script type="text/javascript" src="extjs/bootstrap.js"></script> <script type="text/javascript" src="themes.js"></script> </head> <body> </body> </html> |
复制webapp/extjs/resources/themes/templates/resources到webapp下，复制webapp/extjs/resources/themes/images到webapp/resources下。最终的目录结构如下图：
新建一个scss文件，内容如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
$include-default: false; /*创建一个紧凑的CSS，不包括全部的组件*/ /*添加自定义变量*/ $base-color: #ffaabb; /*基础色调：粉红*/ @import 'compass'; /*需要导入的库和文件*/ @import 'ext4/default/all'; /*导入该目录下所有SCSS文件*/ /*需要包括的组件的列表*/ @include extjs-boundlist; @include extjs-button; @include extjs-btn-group; @include extjs-datepicker; @include extjs-colorpicker; @include extjs-menu; @include extjs-grid; @include extjs-form; @include extjs-form-field; @include extjs-form-fieldset; @include extjs-form-file; @include extjs-form-checkboxfield; @include extjs-form-checkboxgroup; @include extjs-form-triggerfield; @include extjs-form-htmleditor; @include extjs-panel; @include extjs-qtip; @include extjs-slider; @include extjs-progress; @include extjs-toolbar; @include extjs-window; @include extjs-messagebox; @include extjs-tabbar; @include extjs-tab; @include extjs-tree; @include extjs-drawcomponent; @include extjs-viewport; /*如果设置为true，那么图片的路径改为相对，即从ext-theme/resources/images里面寻找*/ $relative-image-path-for-uis: true; |
进入my-ext-theme.scss所在目录，执行以下命令即可生成CSS文件，原有文件自动被覆盖：
|
1 2 |
cd D:\JavaEE\projects\eclipse\4.3.2\ext-theme\src\main\webapp\resources\sass compass compile |
刷新浏览器，可以看到页面上的ExtJS组件均是粉红色调了。
在目录ext-theme/extjs/resources/themes/stylesheets/ext4/default/variables中，包含若干scss文件，定义了所有可用的变量。例如_panel.scss中包含以下变量：
|
1 2 3 4 5 6 7 8 |
// =============================== // ========= BASE PANEL ========== // =============================== /*从变量名称上很容易看出其与CSS属性的对应关系：$panel-border-radius 对应了 border-radius*/ $panel-border-radius: null !default; $panel-border-width: 1px !default; $panel-base-color: adjust-color($base-color, $hue: 0deg, $saturation: 0.542%, $lightness: 7.843%) !default; //#DFE8F6 $panel-border-color: adjust-color($base-color, $hue: 0deg, $saturation: 7.644%, $lightness: -8.627%) !default; |
如果需要修改这些变量的值，只需要在my-ext-theme.scss中进行覆盖：
|
1 2 |
$panel-border-radius: 3px; //圆角边框 $panel-header-font-size: 14px; //放大字体 |
重新执行compass compile命令，即可看到修改后的样式。
如果需要单独修改某个组件的外观，而让其它组件保留默认的样式，例如，在某些特殊场景下使用红色的Window，其它情况下使用默认的蓝色风格。ExtJS 4的某些组件支持Sass混入，可以满足这一需求。
在my-ext-theme.scss中添加以下代码：
|
1 2 3 4 5 6 7 8 9 10 11 |
@include extjs-window-ui( 'custom', $ui-border-radius: 10px, $ui-border-color: darken($base-color, 40%), $ui-inner-border-color:darken($base-color, 30%), $ui-header-color: darken($base-color, 60%), $ui-body-border-color: darken($base-color, 30%), $ui-body-background-color: $window-body-background-color, $ui-body-color: darken($base-color, 30%), $ui-background-color: $base-color ); |
上面的代码为Window组件定义了新的外观，可以采用如下的方式引用之：
|
1 2 3 4 5 6 7 8 9 10 11 |
Ext.createWidget( 'window', { ui : 'custom', /*使用外观*/ renderTo : 'customUIWindow', width : 150, height : 150, title : 'Window', bodyPadding : 5, html : 'Some text here', collapsible : false, closable : false } ).show(); |
遗留浏览器不支持某些CSS3的特性，ExtJS使用图片为这些浏览器模拟圆角边框、渐变背景等特效。Slice Tool可以用来创建这些图片，它是Sencha SDK Tools的一部分。下载并安装SDK后，执行以下命令：
|
1 2 3 4 5 6 |
cd D:\JavaEE\projects\eclipse\4.3.2\ext-theme\src\main\webapp rem -d ExtJS 4的根目录 rem -c 通过Sass/Compass创建的CSS文件的路径，将根据此CSS生成图片 rem -o 输出图片的目录 rem -v 详细输出各图片被创建的过程 sencha slice theme -d extjs -c resources/css/my-ext-theme.css -o resources/images –v |
命令执行成功后，会输出Done字样。
Slice Tool不能处理某些图标，这些图标需要手工使用Photoshop之类的工具处理。
Leave a Reply