本文将根据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目录复制到项目中就可以在项目中使用自定义的主题了。