ExtJS 6.6的新功能

简介

Sencha Ext JS 6.6已经支持NPM包和开放工具。Ext JS 6.6现在可以通过NPM包让开发人员使用已经相当熟悉的异常简单的工作流。现在，Ext JS开发人员可以是强大的开放式 工具 来快速生成、构建和更新Ext JS应用程序。Ext JS 6.6还带来了一些主要的增强，如新的现代工具包组件、新的美丽的可访问主题、现代工具包本地化、高级路由和几个Ext JS组件和框架的增强。

Ext JS 6.6 的亮点

Ext JS 6.6通过NPM和开放工具从根本上改变了Ext JS应用程序的生成和创建。此版本中的新功能包括:

Ext JS的NPM包：Ext JS标准和白金用户现在可以直接从Sencha的NPM存储库获取组件、主题和框架的NPM包。

ExtGen：新的开放工具，可以让你通过回答问题的方式来生成新的Ext JS应用程序，并提供了几个新的应用程序模版。

ExtBuild：新的开放工具，用来生成和分发应用程序

新的现代工具包组件：基于材料设计规范的时间字段以及时间面板组件以提供时间视图。

新的美丽的石墨主题可以让可访问性应用程序令人大吃一惊。

增强了对现代工具包的本地化支持。

高级Ext JS路由功能的增强。

增强了仪表组件，并提高了显示间隔值的能力。

基于Ext JS框架、组件和主题的NMP包

JavaScript社区中的工具正进化到以更快的时间、更高的质量和可维护性来创建Web应用程序。Node Package Manager或NPM是JavaScript开发人员非常喜欢的软件包管理器。NMP承载了一个庞大的存储库，包含了70万个基于JavaScript的代码包以便开发人员在他们的应用程序中使用这些代码包。

现在，随着Ext JS 6.6的发布，Ext JS框架、组件和主题已经作为NPM包托管在NPM存储库npm.sencha.com。Ext JS开发人员可以执行简单的命令来将一个包添加到项目、管理依赖和管理所使用的包的版本。他们也可以很容易的将第三方的JavaScript库添加到Ext JS应用程序。

譬如，可以使用以下命令轻松的将Ext JS Pivot Grid的NMP包添加到项目：

npm i --save @sencha/ext-pivot

类似，可以使用以下命令将新的石墨主题添加到ExtJS NPM项目：

npm i --save @sencha/ext-classic-theme-graphite

Ext JS客户只需要简单的使用他们的支持门户帐号登录就可以访问NPM存储包。要注意的是，帐号里的@字符需要替换为“..”，例如，登录帐号为firstname.lastname@sencha.com，则需求修改为firstname.lastname..sencha.com。

可以使用以下命令在Sencha NPM存储库进行认证：

npm login --registry=http://npm.sencha.com --scope=@sencha

Ext-Gen：新的用来创建ExtJS应用程序的开发工具

随着新的Ext JS NPM包的发布，我们正在创建新的强大的开发工具包来实现代码生成、构建继承和工作区管理。Ext-Gen是新的使用Ext JS NPM包来协助快速创建应用程序的强大工具。Ext-Gen提供了多个新模版来创建移动、桌面或通用的应用程序。当然，也可以使用自己的模版来创建Ext JS应用程序。

Ext-Gen是一个基于NodeJS的跨平台命令工具，提供了多种模式来创建应用程序。它的自动模式会使用默认配置项快速构建应用程序，而交换模式则通过提出一系列的问题并根据这些问题的答复来构建应用程序。创建的应用程序将使用webpack的开发服务器来将任何修改立即反映到浏览器中。

可以使用以下命令来安装Ext-Gen:

npm install -g @sencha/ext-gen

可以通过以下命令来使用Ext-Gen创建整个Ext JS应用程序：

ext-gen app -a

Ext-Build：新的生成Ext JS应用程序的开发工具

Ext-Build是一个新的基于NodeJS的用来生成Ext JS应用程序的工具。Ext-Build当前使用的是Sencha Cmd和Google Closure compoler来生成和分发Ext JS应用程序。Ext-Gen会使用Ext-Build来生成Ext JS应用程序的开发或产品版本。

例如，可以使用以下命令和生成配置来生成现代工具包应用程序：

ext-gen app -t moderndesktop -n ModernApp

"builds": {
        "desktop": {
            "toolkit": "modern",
            "theme": "theme-material",
          }
    }

对于开发工具，仍然可以使用向后兼容的Cmd命令。NPX是npm包的运行器，允许在应用程序的工作区内调用Cmd的二进制文件。

例如：使用以下命令将直接使用Cmd来生成应用程序：

npx sencha app build desktop

新的现代工具包组件：时间字段和时间面板

时间面板是一个新的现代工具包组件，通过使用模拟钟面的方式提供了一种非常简便的时间选择方式。时间面板组件支持桌面、平板以及iOS或安卓设备。在选择小时值后，组件将自动前进到分钟。有多个配置项来设置钟面的对齐方式和模式。当将垂直配置设置为auto时，时间头将基于设备的方向进行设置。

时间字段是一个新的现代工具包组件，它允许输入时间并自带时间验证。时间字段会使用JavaScript日期对象来验证输入。组件支持多种时间格式且依赖于默认的区域设置。时间字段可以使用日期选择器来提供简单的时间选择方式。

ExtJS现代工具包应用程序的本地化

用能理解的语言和所习惯的约定来与用户教练是至关重要的。Ext JS现代工具包现在也支持本地化了，这有助于开发人员方便的针对非英语语言对应用程序实现本地化。Ext JS 6.6添加了德国、意大利、法国、西班牙和葡萄牙等语言。本地化包在override文件夹包含了所有的本地化绑定文件。本地化重写会告诉Ext JS去替换某些组件的默认值（英语），如日期格式、月或日等。

以下是一个使用法语的应用程序的app.json文件的示例：

"requires": [
        …, 

        "ext-locale"
    ],

"locale":"fr",

对于NPM创建的英语程序，可以使用以下代码导入ext-modern-locale包：

npm i --save @sencha/ext-modern-locale

石墨（Graphite）主题：新的美丽的可访问主题

Ext JS 6.6提供了新的美丽的石墨主题，会让你的可访问应用程序令人眼前一亮。石墨追她一个可访问的高对比度主题，旨在使视力受损的用户更容易的查看应用程序。石墨主题是从海卫一主题继承的，因此它是一个扁平的、简约的、非图形化的主题。石墨主题可以让英语程序开箱即用或扩展出自定义的外观。石墨主题的颜色、字体和填充在设计时就遵循WCAG2.0可访问性指南的指引。

使用材料主题（Material Theme）的动态样式

对于许多Web应用程序，可以快速的查看主题改变后的效果是相当实用的。Ext JS的材料主题支持CSS变量，并提供了API来获取或设置颜色，因而，现在可以通过一个颜色选择来验证材料颜色，还可以在不需要外部服务器或Cmd的情况下，实时更新应用程序的外观。

使用材料主题的API来获取颜色：

Ext.theme.Material.getColors()

使用材料主题的API来设置颜色：

Ext.theme.Material.setColors({
                'darkMode': darkMode,
                'base': base || me._materialBaseColor,
                'accent': accent || me._materialAccentColor
            });

高级ExtJS路由功能的增强

ExtJS的路由功能可以通过浏览器的历史堆栈来跟踪应用程序的状态。路由还支持应用程序的深度链接，允许直接访问应用程序的某一个部件。这是非常实用的功能，用户可以将应用程序作为一个书签，甚至将链接发送给其他人以便直接访问应用程序的某个部件。

在ExtJS 6.6包含了几个高级路由功能，如在导航离开时，运行路由的exit，在路由中支持具有可选类型的命名参数，以及在第一次使用后断开链接的路由。下面是一个使用通配符路由的示例：

routes : {
    '*'   : 'onRoute',
    'foo' : 'onFoo'
}

routes : {
    '*'   : {
        before : 'onBeforeRoute',

        exit : 'onExit',
        action : 'onRoute'
    },
    'foo' : 'onFoo'
}

仪表组件的指针增强

仪表组件在现代或经典应用程序都得到了增强，现在支持使用各种不同的指针类型。在应用程序中，现在可以使用楔形、菱形、尖峰、箭头等指针类型。

仪表组件还提供了自定义指针功能。

原文： http://docs.sencha.com/extjs/6.6.0/guides/whats_new/whats_new.html

译者：上将军

译文： https://blog.csdn.net/tianxiaode/article/details/80761192