Extjs自定义主题

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

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

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

在myworkspace目录下输入命令：sencha �Csdk 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中添加如下代码：

items: [{     xtype: 'button',     text: 'Show Message',     handler: function() {         Ext.Msg.show({             title: 'Info',             msg: 'Message Box with custom icon',             buttons: Ext.MessageBox.OK,             icon: Ext.MessageBox.INFO         });     } }]

 

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

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