自定义ExtJS主题

Posted 2020-08-28 代码很疯狂

ExtJS提供的可以使用的主题包对于创建一个干净专业的程序来说已经很有创意了，然而，你可能还是会希望提供自己的一种设计方式或现在存在的企业设计方式。

从历史上来说，给程序美化就是指的给html标签提供渲染组件的规则，但是这样做也会有一些弊端出现。首先，你需要负担的是各种支持的浏览器。其次，随着框架的成熟，很多不愉快就会产生，比如你的规则风格的变化需要追逐潜在元素的改变。通过ExtJS提供的API就可以很好的解决这些问题。

通过theming API创建的主题可以在任何ExtJS程序中共享。这就运行你可以编写一次规则，重复给你的程序持续改变风格。这个指导就会列出必要的主题工作，不论你是创建一个工作空间还是应用程序或者单独就是创建一个个性化主题。

 

这个指导将会覆盖基本的关于使用classic toolkit(ExtJS)的个性化主题，接下来，我们将会覆盖不同的现代主题(SenchaTouch)的方式,最终，将会介绍Triton主题和扩展性。

 

如果你想做以上事情，你就需要安装sencha cmd 6以上版本。可选的JRE1.7版本，如果你需要使用app watch的话，就必须安装。如果不安装JRE7以上，那就需要每次启动sencha app refresh来刷新改动。

 

构建一个个性化主题

当你准备好以上步骤的时候，你就可以自定义主题了。首先需要创建一个工作空间，但这不是必须的，使用如下命令创建工作空间 sencha -sdk {path/to/Ext-JS-SDK} generate workspace my-workspace

 

一、创建一个测试使用的工作程序

使用命令sencha -sdk ext generate app -classic ThemeDemoApp theme-demo-app

切换到当前程序 cd theme-demo-app

二、创建自定义主题目录，使用 命令 sencha generate theme my-classic-theme

启动程序 sencha app watch

浏览器查看效果 http://localhost:1841

修改packages/local/my-classic-theme/package.json下的extend节点，"extend": "theme-neptune"修改为"extend": "theme-crisp"

三、配置全局变量

创建文件packages/local/my-classic-theme/sass/var/Component.scss增加内容$base-color: #317040;

在应用程序中使用自定义的主题。找到theme-demo-app/app.json将"theme": "theme-triton",替换为"theme": "my-classic-theme",

四、给gridpanel设置红色边框，修改my-classic-theme/sass/src/panel/Panel.scss

@include extjs-panel-ui(
    $ui: ‘highlight-framed‘,
    $ui-header-background-color: red,
    $ui-border-color: red,
    $ui-header-border-color: red,
    $ui-body-border-color: red,
    $ui-border-width: 5px,
    $ui-border-radius: 5px,
    $ui-header-color: white
);