sencha cmd项目主题修改
来源:互联网 发布:炒股软件的定制 编辑:程序博客网 时间:2024/05/20 05:26
本人使用的是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);//交替行背景色
重新编译后,刷新浏览器查看效果(虽然颜色很丑,但是比较明显哈):
0 0
- sencha cmd项目主题修改
- Sencha Touch 修改默认主题
- sencha cmd新建sencha touch项目
- sencha CMD 3.1 之主题开发
- 使用sencha cmd创建项目
- [Extjs6]如何使用sencha cmd创建项目及如何启动修改项目创建新的界面
- sencha touch使用sencha cmd 5.0 创建项目、打包
- Sencha cmd 5.1 生成EXTJS项目
- extjs6 入门 sencha cmd 新建项目
- 使用Sencha cmd 创建Extjs6.2项目
- Sencha Cmd
- Sencha Touch入门:Sencha Touch开发环境搭建及使用 Sencha Cmd 自动创建项目框架
- Sencha Touch入门:Sencha Touch开发环境搭建及使用 Sencha Cmd 自动创建项目框架
- Sencha Architect开发移动项目及Sencha Cmd对项目压缩Android应用程序
- Sencha Cmd 辅助开发ExtJS4 MVC架构项目
- sencha touch cmd 环境配置(创建项目、打包、发布 )
- extjs6入门:用sencha cmd搭建简单的extjs6项目
- ExtJS(6)- 用Sencha Cmd构建打包Ext项目
- 面向对象程序设计上机练习十一(运算符重载)
- 网络爬虫:URL去重策略之布隆过滤器(BloomFilter)的使用
- cocos2d html5 3.8.1 .修复Cocos2d Particle Builder plist 粒子文件 base64 图片 解压错误
- 面向对象程序设计上机练习十二(运算符重载)
- window 安装 pip 链接
- sencha cmd项目主题修改
- Mac下Idea编译报错:javacTask: 源发行版 1.7 需要目标发行版 1.7
- 设置maven项目java的版本
- 整数求和
- 排序算法
- 输入入门Ⅰ
- 最近学习计划
- 输入入门Ⅱ
- 输入入门Ⅲ