【翻译】Ext JS 5的平板支持

原文：Ext JS 5 Tablet Support

Ext JS已被公认为桌面Web应用程序的领先框架。自从平板开始在全球挑战PC的销售，不管是我的仍是企业，电脑横向的应用已经产生急剧的变化。Sencha意识到了这种变化，并推出了包含新功能和进行优化了的Ext JS 5。

Ext JS从Sencha Touch 2学到了一些新把戏。多年最好的移动Web应用程序框架经验的沉淀要应对现代平板电脑上的桌面显示，那是卓卓有余的。经过类系统、事件管理、窗口小部件和新的部署选项就能够了解到这些更新。

除了能在平板上展现富应用程序外，Ext JS 5还彻底支持全部为触屏设备量身定作的交互模式。

类系统

在最新的类系统中，针对平板所需的新功能作了更新。在Ext JS 4引入了配置（config）系统，但直到Sencha Touch 2，它才被确切的被强制执行。开发人员如今能够在Ext JS 5充分利用起配置对象、访问方法（getter）、修改方法（setter）、更新方法（updater）和强大的Ext.factory。

要知道的是，新的Ext JS配置系统并不要求使用配置对象，这是为了向下兼容版本4。不过，它能自动将配置对象的属性转化为对应的根属性。

为了更好的解释这一律念，请观察如下Ext JS代码片断：

一般状况下，html属性在早期的Ext JS应该定义在config块外，由于Ext.Component已经包含了一个名为setHtml的成员函数，类系统会将值传送到访问方法。


这个重要的方式有助于Ext JS 5重用为Sencha Touch 2编写的代码，而反之亦然。这并不只仅限于在两个框架中共享代码，它还能将许多Sencha的重要功能从Sencha Touch归入到Ext JS 5中。

事件

Touch的核心输入方式是基于触屏的，而这也是为何Sencha将touch事件和手势交互支持捆绑到Ext JS 5的缘由。此次升级的关键一点就是为新的事件统一模式，把公共事件转换为各类不一样平台的事件。

在该示例中，mousedown事件会被应用在大多数的桌面客户端上。然而，事件管理系统会自动识别触屏设备，并根据浏览器将它切换为touchstart或pointerdown。要能正确的与平板交互，事件转换是必需的。

事件更新是双向的，既添加新功能到移动应用程序，也添加新功能到桌面应用程序。Ext JS的小部件，如今即便运行在桌面浏览器，也能响应为移动应用程序设计的滑动、长按或其余手势。固然，涉及多点触碰（例如夹、旋转等）的事件并不能移植到桌面的鼠标操做环境中。这样，并非鼓励开发人员去将移动体验应用到桌面上，而是要确保展现的一致性。

启用触碰事件后，动量卷动 (momentum scrolling)就可将它的方式应用到框架。Touch Scroller如今是Ext JS 5的一个组成部分，能够自动应用在触屏设备，且不须要作任何配置。

不管是类系统更新仍是事件管理更新，都显著添加了对平板的支持。最终用户可经过与视图和小部件的交互来体验到这些新功能。下面咱们来看看小部件是如何经过布局来得到最佳的平板的支持的。

小部件

寻求最优的触屏展现已超越了触碰事件。某些基于鼠标的交互模式（如mouserover/hover，右击）不能用在平板上。在桌面浏览器上支持这些事件的小部件如今可采用其余手段来进行界面操做。

网格面板是这样的小部件的完美示例。若是观察一下标题菜单，会发现它须要大量的交互来打开他们。

首先，要激活菜单，鼠标要移动到列标题上。而后UI显示一个箭头按钮在右边。最后，按下按钮弹出菜单。

这个特定的流程不可能彻底复制在触屏上。尽管这样，网格面板仍是有触屏感知的，并能将本地桌面模式替换为触屏模式。当网格显示在一台平板设备的时候，它可经过长按事件来显示标题菜单，而这只须要用户触屏列标题比平时更长一段时间。

另外一个有趣的示例是行的突出显示。它颇有趣，由于在平板上如今也有了替代品。突出显示的主要目的是便于识别鼠标指针位置。因为触屏没有这个问题，行突出显示显得有点过期。

Ext JS 5的小部件不单优化了平板上的显示，还包含了来自于Sencha Touch 2的新功能。例如，启用了图标的按钮让用户界面变得更美了。

属性iconCls如今在Ext JS工做得很好，由于按钮被融入到了其余小部件，如标签面板，咱们会看到整个堆栈都已经被更新了。

新的Sencha图像包是另外一个展现两个框架如何美妙的实现整合的例子。图表证实了新的类系统更新和事件管理更新让用户接口真正实现了设备无关性，同时保持了API和性能的持久性。不管是使用Ext JS 5仍是Sencha Touch 2进行开发，必定要试一下图表。

除了这些特定的更新，任何小部件都具备专为移动设计准则而引入的 responsive配置项。任何基于方向或通过精心策划的可视区域的尺寸规则的具备访问方法的配置属性均可以被更新。Phil Guerrant为此写了一篇详细的博客文章《Designing Responsive Applications with Ext JS》，还能够在示例程序中看到这些新功能。

若是在这一小节有任何遗漏的，那就是Ext JS 5为开发人员提供了足够的工具来让小部件实现设备无关性。在开发mouseover或右击时，要为触屏考虑和计划所需的替代事件监听。框架提供了一些使用内置的小部件的解决方案。这须要观察、学习和重用他们来建立成功的应用程序。

最后，一个完美的精心编制的平板应用程序就会为用户设备找到它合适的方式。

部署

在完成制做完美的桌面和平板应用程序的全部艰苦工做后，接下来要作的就是部署。幸运的是，有多个可用的选项：

1. 浏览器：最简单和最直接的解决办法就是经过HTTP协议来将Web应用程序交付到客户端浏览器。别忘了使用Sencha Cmd的“sencha app build production”命令来缩小、压缩和优化源代码。
2. Sencha Space：企业应用程序须要企业级的节方案。Space有助于在BYOD环境中交付和管理安全的Web应用程序，并能完美的运行Ext JS 5的应用程序。
3. Cordova：混合应用程序的开发人员会喜欢上将Ext JS 5和Sencha Cmd 5集成在一块儿的改进。新的构建功能能让开发人员轻松的使用“sencha app buildnative”命令来基于Cordova封装应用程序。

小结

Ext JS 5不只仅让应用程序能够在平板上显示，还包含了从0到发布这整个工做流程，还捆绑了强大的交互功能，甚至协助你部署应用程序。更重要的是，它很简单，使学习曲线更适合于初学者。当你开始构建下一个Ext JS 5的应用程序的时候，千万要记得可能某些人可能会在平板上使用它，而且会爱上它。

做者： Grgur Grisogono
Grgur is a Principal at Modus Create and is the co-author of Ext JS in Action SE. Grgur has experience in JavaScript, CSS, HTML5, Sencha Touch, Ext JS, web apps and hybrid mobile. He is active in the European Sencha community.