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