javascript
【翻译】针对多种设备定制Ext JS 5应用程序
原文：Tailoring Your Ext JS 5 Application for a Multi-Device World
概述
鑒于當今設備和表單因素的擴散，要針對所有這些可能性來優化應用程序已經變得越來越復雜。雖然可以使 用CSS響應這些環境條件，但典型的，如Ext JS應用程序這樣，還是要包含大量的Javascript。在某些情況下，使用javascript來針對設備細節進行編碼可能很簡單，但也可能很快就會 失控。好消息是，在Ext JS 5.1，提供了幾個功能強大的工具來管理這種復雜性。
在先前的文章已經介紹了許多這樣的技術。這有助于去了解與比較他們之間的異同，以便于選擇適合的工具來完成手頭的工作。
內聯技術
要理解這些工具的最好方式就是通過一個簡單的示例。下面假設需要針對不同的設置對面板定義不同的標題。對于某些 設備的面板，在有足夠的空間，因而更長的、描述性的標題更適合，而毒藥小屏幕，則縮寫的標題更適合。本練習的目的不在于講解如何使用最好的方式來完成這個 特定的目標，而是要確保所采取的技術不會被更復雜的示例的細節所掩蓋。
platformConfig
屬性platformConfig是在Ext JS 5.1中新添加的，可以在類定義中使用，或者可以基于當前平臺或設備分類在創建類的實例時的配置對象中使用。在視圖中使用時可能類似以下代碼：
以上代碼和下面的直接方法具有相同的效果：
Ext.define('App.view.summary.Manufacturing',?{extend:?'Ext.panel.Panel',?title:?testForDesktop???'Manufacturing?Summary':?'Mfg?Summary' });以上代碼不是讓你去比較platformConfig和三樣運算符的優缺點，而是讓你去了解platformConfig是如何被聲明為了類的一部分的。因此，該方法的工作是與基類無關的。使用platformConfig而不使用內聯邏輯的一個原因是這樣可以保證視圖作為一個純數據可以被安全被定義為JOSN格式。
還可以使用platformConfig來配置實例：
也可以將上面代碼直接轉換為：
Ext.define('App.view.summary.Manufacturing',?{extend:?'Ext.panel.Panel',?items:?[Ext.merge({xtype:?'panel'},testForDesktop???{title:?'Manufacturing?Summary'}?:?{title:?'Mfg?Summary'})]});然而，在這里使用platformConfig，是合并在initConfig方法中進行處理的，也就是說，將platformConfig屬性作為實例配置只有在類的構造函數中調用了initConfig方法時才能實現。而這也是Ext.Widget、Ext.Component、大部分數據包類（如store）和其他類使用Ext.mixin.Observable的原因。
在實例配置中通過修改對象的初始配置來使用platformConfig與在類聲明中修改類主體來使用platformConfig類似。
responsiveConfig
Ext JS 5引入了responsiveConfig并通過混入或插件來啟用它。responsiveConfig的不同之處在于它的規則和屬性不只在創建實例時 進行計算，還會在設備的方向或可視區域發生改變時進行計算。這相對于platformConfig來說會增加一些開銷，通過監聽窗口大小或方向的改變來處 理可能來得更有效。
可以稍微調整一下要求，以便根據設備的大小來進行標題響應，而不是設備分類（“desktop”）。
由于以上類使用了responsiveConfig，因而在這里使用了混入，這比使用插件的方式更有好處，因為這樣可以避免為每要給實例創建一個插件。不過，在組件實例上使用的時候，就需要使用responsive 插件：
Ext.define('App.view.summary.Manufacturing',?{extend:?'Ext.panel.Panel',?items:?[{xtype:?'panel',plugins:?'responsive',?responsiveConfig:?{'width?>=?600':?{title:?'Manufacturing?Summary'},'width?<?600':?{title:?'Mfg?Summary'}}}]});以上代碼要謹記的是寬度指的是可視區域的寬度，而不是組件寬度。
Ext.app.Profile
使用platformConfig和responsiveConfig，可以說是外科手術式的調整。而使用配置文件，則可以管理更大的差異。配置文件被添加到Ext JS 5.1中，且作為應用程序架構的一部分，它最初是在Sencha Touch中引入的。
通常，使用配置文件可在應用程序的頂層通過mainView（或Viewport）進行切換，這意味著可以通過當前的配置文件來控制應用程序創建完全不同的視圖。
配置文件只可用于使用Ext.app.Application的應用程序，且必須如以下代碼哪樣列出不同的配置文件：
在每一個配置文件類內，isActive方法決定了該特定的配置文件應否為當前活動的配置文件：
Ext.define('App.profile.Desktop',?{extend:?'Ext.app.Profile',?mainView:?'App.view.desktop.Main',?isActive:?function?()?{return?Ext.os.is.Desktop;},?launch:?function?()?{console.log('Launch?Desktop');}});可以在平板或桌面中嘗試一下這個示例來看看配置文件的基本使用方式。也可以在這里查看示例的源代碼。
配置文件不需要使用mainView配置項，并可以選擇使用提供的launch方法來進行自定義處理。只有當前活動的配置文件的launch方法會被調用。
Sencha Cmd的生成配置
如果使用Sencha Cmd來創建應用程序，也可以使用它來創建配置文件，這功能是在Sencha Cmd 5.0中引入的。創建配置文件可以讓你只需要單獨一個HTML頁面（應用程序）并在加載時選擇多個生成版本。這類似于如何去選擇一個 Ext.app.Profile實例，而實際上是加載不同的生成版本。這種選擇的基礎可能是環境、存儲的Cookie，甚至可能是用戶賬號中存放在服務器 的數據。
無論是如何進行檢測的，只有被選擇的生成的代碼和CSS會被加載。這與Ext.app.Profile需要在生成中包含所有配置文件的代碼不同。
Ext JS Kitchen Sink示例就是使用多生成配置文件來啟用主題與區域切換的。它根據每一個生成配置創建了兩個生成選擇，并在URL中通過查詢參數來選擇所需的生成配置文件，這時候，在index.html中的代碼類似如下代碼：
小結
有了許多工具在手，針對特定情況選擇合適的工具是個問題。對于只是在加載時進行簡單調整的情況，可以考慮platformConfig。對于更多動態條件的情況，建議responsiveConfig。如果是更大規模的情況，可以考慮Ext.app.Profile。
如果需要在平板電腦而不是桌面上（甚至于基于用戶授權），讓應用程序看起來完全不同，可以考慮Sencha Cmd生成配置，它可以從桌面生成中移除平板開銷，反過來也一樣。
由于沒有放之四海而皆準的解決方案，Ext JS提供了不同的工具來增加靈活性和效率。他們一起工作有助于確保應用程序自然而然的適合廣泛的各種設備。
作者：Don Griffin
Don Griffin is the Engineering Manger for Ext JS and Sencha Touch. He was an Ext JS user for 2 years before joining Sencha and has over 20 years of software engineering experience on a broad range of platforms. His experience includes designing web application front-ends and back-ends, native GUI applications, network protocols and device drivers. Don’s passion is to build world class products that people love to use.
總結
以上是生活随笔為你收集整理的【翻译】针对多种设备定制Ext JS 5应用程序的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： AX2012 referencegrou
- 下一篇： Spring Aop 切点表达式