sencha cmd项目主题修改

本人使用的是Hbuilder,用cmd进入项目目录,执行sencha app watch,当项目配置文件被修改后,其可以自动检测并实时编译,也可以手动编译:sencha app build
1、修改项目的主题风格
默认项目的主题是theme-triton,我们可以将其修改成theme-triton
步骤:打开app.json文件,找到”theme”: “theme-triton”,将其改成”theme”: “theme-neptune”,如图所示:
sencha cmd项目主题修改_第1张图片
保存后,编译后刷新浏览器,查看效果:
对比主题改变前后:
sencha cmd项目主题修改_第2张图片
sencha cmd项目主题修改_第3张图片
对比可以发现,字体发生了变化。
2、通过修改全局变量修改主题
修改全局sass文件all.scss,目录:sass/var/all.scss
可以修改的全局变量可以查询ext api的Global_CSS
sencha cmd项目主题修改_第4张图片
试着增加两行

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

sencha cmd项目主题修改_第5张图片
修改sass文件需要重新编译项目,如果使用了sencha app watch则会自动编译,否则用sencha app build
sencha cmd项目主题修改_第6张图片
sencha cmd项目主题修改_第7张图片
可以明显看到窗口按钮等颜色发生变化,表格内字体颜色也发生了变化
3、通过自定义sass文件,修改指定页面视图的样式
为了观看效果,将全局样式还原成默认配置
现在,为默认项目里的List表格增加样式,即右边的personnel表格
在sass文件下建立文件view/main/List.scss
List是表格grid组件,其配置属性可从API 查找:
sencha cmd项目主题修改_第8张图片
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);//交替行背景色

重新编译后,刷新浏览器查看效果(虽然颜色很丑,但是比较明显哈):
sencha cmd项目主题修改_第9张图片

你可能感兴趣的:(extjs6,sencha-cmd)