Extjs替换自带theme

来源:互联网 发布:张予曦开的淘宝店 编辑:程序博客网 时间:2024/05/16 19:53

原文出处:http://www.cnblogs.com/legendxian/p/3254972.html


剪出原文的第一种方式:

1.创建工作空间

cd /d [extjs SDK所在目录]
sencha generate workspace F:\Test\ExtJs4.2\workspace

2.创建app

cd /d [extjs SDK所在目录]
sencha generate app App1 F:\Test\ExtJs4.2\workspace\app\app1

3.编译

cd /d [app1s所在目录]
sencha app build

4.创建自己的主题

cd /d [app1s所在目录]
sencha generate theme my-custom-theme

5.设置要扩展的风格样式

找到"workspace/packages/my-custom-theme/package.json"文件,修改其中内容:
"extend": "ext-theme-neptune"
"app1"目录下,输入下列命令:
sencha app refresh

6. 设置要全局样式变量 

在"my-custom-theme/sass/var/"目录下新建Component.scss 文件.并写入一下内容:
$base-color: #317040 !default;
在"packages/my-custom-theme/"目录下,输入以下命令
sencha package build

7.使用样式

找到 app1/.sencha/app/sencha.cfg 文件
app.theme=ext-theme-classic
修改为:
app.theme=my-custom-theme
在" app1"目录输入如下命令,清理并重建应用
sencha ant clean
sencha app build
在浏览器中打开"app1/index.html"文件,可看到变化.


0 0