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），现在能够实现了，同时感谢黄灯桥老师的指点！