sencha CMD 3.1 之主题开发

Sencha Cmd 3.1 之 主题开发

本篇文章主要介绍sencha cmd3.1的使用以及ExtJS4.2的主题开发。

废话不多说，我们来直接看如何使用sencha cmd3.1来生成项目结构，然后再此基础上制作自己的主题。

要实现如上功能，你需要安装一些软件：

1.安装JDK 或JRE 1.6+；

2. 为制作主题，需要安装ruby、compass、sass

3.安装sencha cmd3.1和下载extjs4.2 sdk

（提示：JDK、extjs4的下载不要说了吧，ruby可以到http://rubyinstaller.og下载），ruby安装好后，启动”start command Prompt with Ruby”，

在ruby命令行窗口中，输入gem install compass（安装过程可能会有些慢）

Sencha cmd3.1的下载地址：http://cdn.sencha.com/cmd/3.1.0.256/release-notes.html

Sass的使用就不多说了，网上资料很多。

开始构建项目

打开命令行窗口，输入如下命令：sencha –sdk d:\ext-4.2.0.663 generate app MyApp d:\extjsApp

说明：（d:\ext-4.2.0.663是extjs sdk的路径，d:\extjsApp 是项目路径）如果执行成功，控制台会有【INF】信息输出。

 

在D:\extjsApp目录下生成了如上的目录结构及文件。可直接访问index.html。（生成的项目默认使用的主题是ext-theme-classic）   

制作主题

在extjs4.2比较之前的版本又有很多变化，并新增了一些主题，存放是packages目录下。现在就是要制作自己的主题（继承或全新的主题）。主题包同样要使用sencha cmd 命令来生成，（在当前的应用程序（extjsApp）目录下）输入命令如下：sencha generate theme mytheme或者在extjsApp/packages目录下执行sencha generate package -type=theme mytheme也是可以的。

说明：mytheme为主题包的名称。命令如果成功执行，也会在控制台打印出一些日志信息，并在packages目录下生成mytheme文件夹，目录结构如下： 

生成的mytheme主题包默认配置继承了ext-theme-classic主题，但在此主题包下并不包含资源文件，你需要buid，才会生成资源文件已被使用。为了演示的效果，将mytheme的主题改为继承ext-theme-neptune，build之后再使用。

方法如下：

首先，打开package.json，编辑"extend": "ext-theme-classic"为"extend": "ext-theme-neptune"然后，在命令行窗口进入到mytheme目录下，执行 sencha package build命令。

成功执行后，你会发现mytheme目录下多了build文件夹，build文件夹内容如图：

  说明：主题包在build之后，继承了ext-theme-neptune主题，拥有了和ext-theme-neptune一样的主题。编辑extjsApp/bootstrap.css文件，将css路径更改如下：@import 'packages/mytheme/build/resources/mytheme-all.css';  再次访问index.html如图 ： 

这样，mytheme主题就成功继承了ext-theme-neptune主题了。既然主题能继承了，我们也可以自己编写自己的样式来进行覆盖。

如何修改sass，可以参考文档中组件的css vars。

做个小例子，修改sass，制作自己的主题由sencha CMD 生成的extjApp项目，默认继承的主题是ext-theme-classic，前面介绍了并制作了自己的主题mytheme,如何让extjsApp默认继承mytheme呢，需要做如下修改。

编辑extjsApp/.sencha/app/sencha.cfg，找到app.theme=ext-theme-classic，并改为app.theme=mytheme即可。

下面介绍如何修改继承的主题，

例如：修改panel的文字颜色。在mytheme\sass\var中新建panel文件夹，然后新建Panel.scss，编辑如下所示：$panel-header-color: red !default; （变量名称请参考API doc）--- 改变panel-header的字体颜色。

编辑完成后，开始编译，输入如下命令：sencha app build编译完成后，extjsApp/build文件夹中会生成已MyApp主题包，关联mytheme主题。再次访问如图：

 

在比如，我们把主题的基调颜色改为粉色(#FF9999 )

在extjsApp\packages\mytheme\sass\var 文件夹中，新建Component.scss，编辑如下：

$base-color: #FF9999 !default;

修改完成后，回到 extjsApp目录下，执行命令：

sencha app build

再次访问index.html  ，如下图所示：

PS：sass的编辑，可以仿照官方提供的主题文件及API DOC来进行修改。

（注： sencha CMD 3.1 only for extjs4.2）

（编写此文件时extjs版本为4.2.0.663，开发文档中的Guides的Theming章节并没有更新，还是延用extjs4.1的做法。 Extjs4是个里程碑，之后的版本变化很快，如此文章中有不正确的地方，欢迎网友指正。）

一直想制作ExtJS这个让人产生审美疲劳的主题（ext-theme-classic），如今可以实现了，同时感谢黄灯桥老师的指点！