【翻譯】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.