ExtJs 7.7.0 下载方法与去除trial水印

背景

  最近发现Sencha ExtJs发布了ExtJs7.7.0版本，立刻下载了SDK包，许多朋友不知如何下载，如何去除右上角的trial水印。本文讲下相关下载技巧与方法。

下载SDK

  首先需要申请试用，申请地址如下，需要注意可能需要梯子，注册的邮箱最好也是国外的邮箱例如gmail：Try Sencha Ext JS: A Comprehensive JavaScript Framework - Sencha

  邮件中会有add-on额外工具包下载地址，如下图：

 Add-on下载地址（含参数）：

https://trials.sencha.com/ext/ext-addons-7.7.0-trial.zip?XXX

注意：上述XXX是邮件中自带的下载参数，我这边去掉了。

SDK地址，把上述下载地址（含参数）把addons-去掉即可：

https://trials.sencha.com/ext/ext-7.7.0-trial.zip?XXX

使用浏览器或者NDM/IDM下载即可。

去除Trial水印

  在下载的SDK中直接运行anywhere，即可访问网站，效果图如下：

anywhere默认为8000端口。 需要说明的是在Kitchen Sink中使用的不是自带的css样式，因此无trial水印。在其它example中，可以看到有trial水印。

我们主要修改下相应的CSS样式，使用VSCODE全文搜索content: 'd'，可以找到相应的:after的样式。

• 在debugg的CSS样式中

  一般为theme-xxx-all_1-debug.css中，修改如下几处：

/* /home/teamcity/buildAgent/work/afb26dfd5bd64d5/staging/classic/theme-neutral/sass/var/panel/Panel.scss:955 */
.x-panel-header-title-default > .x-title-text-default:after {font-family: ext-watermark;font-size: 18.75px;content: 'd';position: absolute;top: 0;right: 0;color: #7b9eca;
}/* /home/teamcity/buildAgent/work/afb26dfd5bd64d5/staging/classic/theme-neutral/sass/var/panel/Panel.scss:955 */
.x-panel-header-title-default-framed > .x-title-text-default-framed:after {font-family: ext-watermark;font-size: 18.75px;content: 'd';position: absolute;top: 0;right: 0;color: #7b9eca;
}/* /home/teamcity/buildAgent/work/afb26dfd5bd64d5/staging/classic/theme-neutral/sass/var/window/Window.scss:636 */
.x-window-header-title-default > .x-title-text-default:after {font-family: ext-watermark;font-size: 18.75px;content: 'd';position: absolute;top: 0;right: 0;color: #7d9ec3;
}

可发现均为标题栏:after的样式，将上述3处直接删除即可。 

• 针对直接引用压缩css的

  找到theme-xxx-all_1.css及theme-xxx-all_2.css中，把content:'d'替换为content:''即可。

• 此外针对使用cmd、ext-gen工具的

  需在对应的SCSS中，使用VSCODE全文搜索 @if $ext-trial 关键字，可发现以下4个SCSS文件：

1、path:\ext-7.7.0\classic\theme-base\sass\src\Component.scss
@if $ext-trial or $ext-beta {...
}2、path:\ext-7.7.0\classic\theme-neutral\sass\var\panel\Panel.scss
@if $ext-trial {&:after {...}
}
@if $ext-beta {&:after {...}
}3、path:\ext-7.7.0\classic\theme-neutral\sass\var\window\Window.scss
@if $ext-trial {&:after {...}
}
@if $ext-beta {&:after {...}
}4、path:\ext-7.7.0\modern\theme-base\sass\src\viewport\Viewport.scss
@if $ext-trial or $ext-beta {...
}@if $ext-trial {#ext-viewport:after {...}
}@if $ext-beta {#ext-viewport:after {...}
}

删除上述内容即可。

效果