sencha cmd项目主题修改

本人使用的是Hbuilder，用cmd进入项目目录，执行sencha app watch，当项目配置文件被修改后，其可以自动检测并实时编译，也可以手动编译:sencha app build
1、修改项目的主题风格
默认项目的主题是theme-triton，我们可以将其修改成theme-triton
步骤：打开app.json文件，找到”theme”: “theme-triton”，将其改成”theme”: “theme-neptune”,如图所示：

保存后，编译后刷新浏览器，查看效果：
对比主题改变前后：


对比可以发现，字体发生了变化。
2、通过修改全局变量修改主题
修改全局sass文件all.scss，目录：sass/var/all.scss
可以修改的全局变量可以查询ext api的Global_CSS

试着增加两行

$base-color:dynamic(red);//基本颜色
$color:dynamic(blue);//字体颜色

修改sass文件需要重新编译项目，如果使用了sencha app watch则会自动编译，否则用sencha app build


可以明显看到窗口按钮等颜色发生变化，表格内字体颜色也发生了变化
3、通过自定义sass文件，修改指定页面视图的样式
为了观看效果，将全局样式还原成默认配置
现在，为默认项目里的List表格增加样式，即右边的personnel表格
在sass文件下建立文件view/main/List.scss
List是表格grid组件，其配置属性可从API 查找：

List.scss文件写入：

$panel-header-font-family:dynamic(Time New Roman);//表头字体
$panel-body-background-color:dynamib(red);//表格背景色
$grid-header-background-color:dynamic(yellow);//表头背景色
$grid-row-cell-background-color:dynamic(blue);//行背景色
$grid-row-cell-alt-background-color:dynamic(green);//交替行背景色

重新编译后，刷新浏览器查看效果(虽然颜色很丑，但是比较明显哈)：