Extjs 使用 themes

1.命令行创建项目

sencha -sdk ext generate app ThemeDemoApp theme-demo-app
cd theme-demo-app
sencha generate theme my-custom-theme

2.文件夹里会自动生成

- package.json 配置文件

- sass 包含所有的sass文件

- sass/var/ saas变量

- saas/src/ sass规则

- sass/etc/ 扩展的工具函数等

- sass/example 放置示例代码

- resources 资源文件

- overrides

使用命令：

sencha app watch

可以监控自动编译sass

3.所有的csncha风格都要从父类继承。可以继承的风格有：

- ext-theme-base

- ext-theme-neutral

- ext-theme-neptune

- ext-theme-neptune-touch

- ext-theme-crisp

- ext-theme-crisp-touch

- ext-theme-classic

- ext-theme-gray

- ext-theme-aria

它们的继承关系是：



这里尝试把风格从ext-theme-neptune继承：

到package.json里配置：把

“extend”:”ext-theme-classic”

可改为

“extend”:”ext-theme-neptune”

4.variables变量定义示例：

$base-color: #317040 !default;

注意自己定义的变量后面都要带个!default。

这里是变量列表：

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_defaults_

5.使用自己定义的资源

修改app.json

“theme”: “ext-theme-neptune”,

改为

“theme”: “my-custom-theme”,

编译：

sencha app build

参考资源：

https://docs.sencha.com/extjs/5.0/core_concepts/theming.html