演练Ext JS 4.2自定义主题

本文将根据API文档中关于主题的介绍做的一次演练，以便熟悉自定义主题的过程。

练习环境：

Sencha Cmd v4.0.1.45
Ruby 1.9.3-p392
firefox 26

首先，使用以下Sencha Cmd命令创建一个名为TestMyTheme的应用程序：

sencha -sdk c:\ext4 generate app TestMyThemec:\TestMyTheme

命令中，参数sdk声明了框架文件所在目录为C盘的ext4目；generate为命令（commands），表示要创建点什么，而app则表示要创建的是应用程序；MyTheme是要创建的应用程序名称，这样，创建的应用程序将会以TestMyTheme作为命名空间；最后的“C:\TestMyTheme”则表示应用程序将创建到C盘的TestMyTheme目录。

应用程序创建后，使用以下Sencha Cmd命令来将应用程序转换为Web服务，以便预览效果：

sencha fs web -port 8000 start -map c:\TestMyTheme

命令中，fs命令表示将要使用功能命令；web则表示创建一个简单的Web服务器；参数port则用例定义访问端口，在这里将使用8000端口；start表示启动服务器；最后的路径表示Web服务器指向的访问目录。

命令执行后，如果显示以下提示信息，则表示Web服务已经成功启动：

Sencha Cmd v4.0.1.45

[INF] Starting shutdown listener socket

[INF] Listening for stop requests on: 49331

[INF] Mapping http://localhost:8000/ toc:\TestMyTheme...

[INF] Starting http://localhost:8000 
[INF] jetty-8.1.7.v20120910

[INF] NO JSP Support for /, did not findorg.apache.jasper.servlet.JspServlet

[INF] startedo.e.j.w.WebAppContext{/,file:/C:/TestMyTheme/}

[INF] started o.e.j.w.WebAppContext{/,file:/C:/TestMyTheme/}

[INF] Started SelectChannelConnector@0.0.0.0:8000

现在，在浏览器输入以下地址，会看到如下图所示效果：http://localhost:8000/



从图中可以看到，目前使用的是经典主题。下面来创建自定义主题。切换到C：\TestMyTheme目录，输入以下命令来创建自定义主题：

sencha generate theme MyTheme

命令执行完后，切换到C:\TestMyTheme\packages目录会看到多了一个MyTheme目录，该目录就是用来创建自定义主题的目录。目前的主题是从经典主题扩展出来的，而这里需要从海王星主题扩展，所以，要进入MyTheme目录，打开package.json文件，将extend属性的值修改为ext-theme-neptune就行了。

下面先来测试一下自定义主题。在DOS窗口下切换到C:\TestMyTheme\packages\MyTheme目录，然后输入以下命令来生成自定义主题：

sencha package build

主题生成以后，打开C:\TestMyTheme\.sencha\app目录下的sencha.cfg文件。在文件中查找app.theme，会找到以下语句：

app.theme=ext-theme-classic

从语句中可以看到，当前使用的主题是经典主题，现在要使用自定义主题，因而需要将ext-theme-classic修改为MyTheme。修改完成后，在DOS中，切换到C:\TestMyTheme目录，输入以下命令生成一次应用程序：

sencha app build

生成过程完成后，刷新浏览器应该可以看到下图所示的效果，主题已经更换为自定义主题（从海王星主题继承的）。



下面来研究下怎么修改主题。一般情况下，主要的修改方式有两种，一种是通过修改主题变量来实现，一种是直接定义自己的样式。要修改变量值，需要在C:\TestMyTheme\packages\MyTheme\sass\var目录下进行，要直接定义自己的样式需要在C:\TestMyTheme\packages\MyTheme\sass\src目录进行。具体修改方式可参考Ext JS包里packages\ext-theme-neptune\sass目录里的文件。

例如，要修改标签页标签栏的背景颜色，可在C:\TestMyTheme\packages\MyTheme\sass\var目录下创建一个名为tab的目录，然后创建一个名为Bar.scss的 文件，在API中，可以查到Ext.tab.Bar的背景颜色的CSS变量代码是$tabbar-base-color，在Bar.scss文件中添加以下代码就可以修改标签栏的背景颜色了：

$tabbar-base-color: #ff0 !default;

修改完成后，在C:\TestMyTheme目录运行“senccha app build”命令生成一次应用程序，就可看到标签栏的背景颜色已经修改为黄色了。

如果想直接修改面板主体的背景颜色，但不想修改变量值，可以在C:\TestMyTheme\packages\MyTheme\sass\src目录下创建一个名为panel的目录，再在新剪的目录下创建名为Panel.scss的文件，然后在文件中添加以下代码：

.x-panel-body-default {

background:none repeat scroll 0 0 #00f;

}

样式x-panel-body-default是面板主体所使用的默认样式，在这里会将背景颜色修改为蓝色。重新生成应用程序后，就会看到面板的背景颜色已经修改为蓝色了。

执行打包命令后，就可以C:\TestMyTheme\packages\MyTheme\build\resources目录下找到打包好以后的css文件，将css文件和images目录复制到项目中就可以在项目中使用自定义的主题了。