Ext JS 5 對平板的支持

Ext JS 已經被公認為桌面web應用的領銜框架. 計算機應用市場，無論是在個人還是企業領域，都因為平板開始挑戰全球個人PC的銷售量而變得云詭波譎起來. Sencha 認識到了這種變化，并在其 Ext JS 5 中退出了新的特性和功能優化.

Ext JS 5 從 Sencha Touch 2 那里學到了一堆的新花樣. 多年在最佳移動web應用框架領域的經驗集于一身，使得其在臺式機上面的產品也能在現在平板上得到完美的呈現. 我們可以從整個全線的更新中看到這些更新 — 類系統，事件管理，小窗口，還有新的部署選項.

In 除了提供平板上的富Web應用，Ext JS 5 還完全支持觸摸屏設備上的所有交互形式

類系統

支持面向平板的新功能的堅實基礎，來自于最新的類系統更新. 當 Ext JS 4 引入配置系統時, 一直到Sencha Touch 2都還不完全是強制的. 開發者現在可以得到最有效的配置對象，get方法，set方法，update方法，apply方法，甚至還有Ext JS 5 中強大的 Ext.factory.

你需要理解，遵循了第4版本的要求，新的 Ext JS 配置系統并不一定需要使用配置對象。不過，它還是能夠將配置對象的屬性自動轉換成它們對應的根配置的.

為了能夠更好的理解這些概念，請參閱以下的 Ext JS 的代碼片段：

在正常的情況下，對于屬性  html 應該在 config 代碼塊外，至少在Ext JS 因為 Ext.Component 已經包含了一個函數  setHtml, 對于 系統級別的值通過 setter的方式實現。

重要的價值使用 在 Ext JS 5 reuse the code written for Sencha Touch 2  ，相反 這不僅僅允許開發人員在不同框架的應用程序中共享代碼，而且能夠使用 Ext JS 5 中關于Sencha Touch 的更多的特性。

事件

對于觸摸屏而言，觸摸是最至關重要的輸入方法, 這就是為什么Sencha要將觸摸事件和對手勢的支持加入 Ext JS 5. 這次升級中的一個關鍵成員就是能將通用的事件轉換對應到跟平臺相關的變種事件，這一新的事件標準化模式.

在這個特定的示例中，mousedown事件會被用在大多數桌面客戶端之上. 而事件管理系統將會自動的識別到觸摸屏設備，并將mousedown事件切換到 touchstart 或者 pointerdown 事件, 這要看瀏覽器是怎么提供支持的了. 事件翻譯對于同平板設備進行正常的交互式至關重要的.

事件的更新時雙向的，移動和桌面應用都會被加入新的特性. Ext JS 組件現在能對手指掃動，長按，還有其它專為移動設備設計的手勢操作進行響應, 甚至在一個桌面系統的瀏覽器上面也能起作用. 自然，需要多指操作的事件(比如，開合，旋轉) 是不能被移植到使用鼠標操作的桌面環境的. 當然，開發者也不會被鼓勵去移植一套移動的體驗到桌面之上，但還是要確保展現上的一致性.

如果開啟了觸摸事件，動勢滾動也會在框架中發生作用. Touch Scroller 現在已經是 Ext JS 5 的一個組成部分了, 它會在觸摸屏設備上自動開啟，而不需要進行什么配置.

類系統和事件管理的更新中都加入了能顯著促進對平板設備支持的特性。終端用戶將會在同視圖和組件交互的過程中體驗到這些特性。讓我們來看看是如何放置以獲取對平板設置的最優支持的.

組件

對于最優觸摸屏展現的需求已經走在了實現觸摸事件的前面. 某些基于鼠標的交互模式(鼠標滑過/懸停，右鍵) 將不會在平板上面起作用. 在桌面瀏覽器上面支持這些事件的組件將會使用一些界面操作的替代手段.

網格面板就是這樣一種組件的完美示例. 當我們觀察頭部菜單時，我們很快會發現需要一些交互較能將它們打開.

擴展了的頭部菜單

首先，為了激活菜單，我們將鼠標懸停在列的頭部。然后將會顯示一個靠右對齊的箭頭按鈕. 最后我們按下按鈕，讓菜單拉下顯示出來.

使得這一流程在觸摸屏上重復是可能的. 不過，網格面板是能夠識別觸摸屏的，并能夠使用觸摸屏的交互模式替換替換掉原來的桌面交互模式. 當在平板設備上查看時，網格會在長按事件發生時顯示頭部菜單，這需要用戶花比平常稍長一點的時間，來簡單的在列的頭部按一下.

另外一個有趣的示例時行的高亮. 之所以有趣是因為它現在在平板設備上有了替代方案. 高亮的主要目的是使得指針所指處的那行變得醒目. 由于觸摸屏并沒有指針，因此行高亮就變得過時了.

Ext JS 5 中的組件不僅對平板設備上的展現進行了優化，它們還從 Sencha Touch 2 處引入了一些新的特性. 例如，使用了圖標的按鈕使得用戶界面更加的漂亮.

iconCls 屬性現在也能在 Ext JS 5 中起作用了. 因為按鈕被其它諸如TabPanel的組件復用了，因此我們會看到整個棧都得到了更新.

The 帶有icon支持的新的TabPanel

新的 Sencha Charts 包是另外一個兩個框架交互的完美實例。Charts 證明了新的類系統和事件管理更新讓 UI 更方便的進行設備上的診斷，同時維護持久化 API 和性能。不管你是否在 Ext JS 5 或者 Sencha Touch 2 上開發應用，你都應該試試 Charts。

Sencha Charts 是首個可以在 Ext JS 5 和 Sencha Touch 2 上共享的包

除了這三個特殊的更新外，任何的 widget 都提供專為移動的設計規則，這是通過引入了響應式配置插件實現的。任何配置屬性都有一個 setter 方法來針對當前屏幕方位進行更新，或者是根據視角唯獨進行更細致的計劃。Phil Guerrant 寫了一篇文章 Designing Responsive Applications with Ext JS 詳細描述了此特性，你也可以查看一些 演示程序.

如果有額外的部分的話，那就是 Ext JS 5 給開發者提供了足夠多的工具讓它與設備無關。當開發的是鼠標懸停或者鼠標右鍵操作，就需要一個對觸摸屏事件監聽器的替換方案。框架提供大量構建在 widgets之上的解決方案。查看，學習并重復使用它們直至成功地制作出app應用。

最終，一個完美且精巧的應用用這種方式被呈現在用戶的設備上。

部署

當你完成了所有工作來實現超棒的桌面和平板應用時，接下來就是應用的部署。幸運的是 ExtJS 提供多種部署選項：

1. 瀏覽器. 這是最簡單最直接的通過 HTTP(S) 協議在瀏覽器上訪問 Web 應用的方式。不過別忘了使用：sencha app build product 命令來最小化、壓縮和優化源碼。

2. Sencha Space. 企業應用要求企業的解決方案。Space 可以幫助分發和管理安全的 Web 應用到一個 BYOD 環境，完美無瑕的使用 ExtJS 5 應用

3. Cordova. 混合應用開發者很喜歡 ExtJS 5 和 Sencha Cmd 5 的集成。新的構建工具可以讓開發者非常簡單的封裝基于 Cordova (PhoneGap) 應用，只需要通過 sencha app build native 命令即可

結論

Ext JS 5 不僅可以在平板上運行，他可以將 Spring0 在整個開發過程中摒棄，強大的交互功能，甚至幫助你完成應用的部署。更重要的是對于初學者能夠很快的制定自己的學習曲線，當你開始構建你的下一個Ext JS 5 應用時，一定要記得有些人非常喜歡在平板使用這些應用。

譯者注：Spring0 請參見  敏捷開發中的 Sprint0.