Extjs自定义主题

标签：extjs   应用程序   文件夹   主题包   

每一个ExtJS程序都是从一个Application类的实例开始的。它包含了你程序的全局设置。

自定义主题的例子：新建一个工作空间：windows控制台窗口下进入有sdk所在的目录输入命令：sencha –sdk  ~/ generateworkspace my-workspace，而后会发现在sdk所在的目录下会出现myworkspace文件夹。其中有连个目录分别为：ext,packages

（1）建立一个应用程序测试项目:

在myworkspace目录下输入命令：sencha –sdk ext generate app ThemeDemoApp theme-demo-app

（2）创建一个主题包：

在myworkspace目录下的theme-demo-app目录下输入命令：senchagenerate theme my-custom-theme将会在myworkspace\packages\my-custom-theme目录下有很多的文件，说明创建自定义主题包成功！

（3）定制自定义主题文件样式：

（1）在packages/my-custom-theme/package.json中将"extend": "ext-theme-classic"修改为："extend": "ext-theme-neptune"。
（2）在my-custom-theme/sass/var/目录下创建一个叫Component的scss文件并输入内容：$base-color: #317040 !default;
（3）在packages/my-custom-theme/sass/var/panel/添加Panel.scss文件并输入内容：$panel-header-font-family:Times New Roman !default;
（4）在"packages/my-custom-theme/resources/images/shared/icon-info.png"添加图片文件icon-info.png为，到时候就能使信息对话框为一个自定义的微笑图像。这需要在theme-demo-app/app/view/Main.js中添加如下代码：

（4）应用定义的主题样式：

在windows控制台下转到theme-demo-app目录，输入sencha appwatch命令。在浏览器中输入：http://localhost:1841将看到如下效果。

本文出自 “Extjs自定义主题” 博客，请务必保留此出处http://9865563.blog.51cto.com/9855563/1679748

Extjs自定义主题

标签：extjs   应用程序   文件夹   主题包   

原文地址：http://9865563.blog.51cto.com/9855563/1679748