【翻譯】使用Ext JS設計響應式應用程式

標籤：extjs   5   響應式   設計   

原文：Designing Responsive Applications with Ext JS

在當今這個時代，使用者都希望Web應用程式無論在形狀還是大小上，既能在案頭電腦，也能在行動裝置上使用。使應用程式能適應不同的需求漸成趨勢。幸運的是，Ext JS 5提供了所有支援應用程式以符合任何螢幕尺寸、形狀和方向的工具。

responsiveConfig概述

要讓Ext JS 5支援新的平板電腦，需要使用“responsiveConfig”，一個強大的新功能，可以讓應用程式根據螢幕大小和方向進行動態響應。使用以下兩個類其中之一就可以啟用responsiveConfig：

• Ext.plugin.Responsive: 為Ext.Component添加響應能力
• Ext.mixin.Responsive: 為其他類添加響應能力
  

在組件中實現響應

處於效能原因，Ext JS組件預設是沒有開啟響應功能的，因此，如果要讓組件啟用響應功能，需要使用響應外掛程式。將響應外掛程式添加到類內，就可以讓所以執行個體實現響應，或者將它添加到執行個體的設定物件中以咋單個組件執行個體中開啟響應功能：

plugins: ‘responsive‘

一旦將響應外掛程式添加到組件的設定物件，組件就會得到一個名為responsiveConfig的配置項。responsiveConfig只是一個包含響應條件的對象，可將滿足條件的配置應當到顯示，例如，假設應用程式中有一個標籤面板，而預期標籤欄在橫向模式時顯示在左邊，在垂直模式時則顯示在頂部，這時，可使用“landscape”和“portrait”作為responsiveConfig對象的鍵來動態設定面板的tabPosition配置項以響應裝置方向的變化：

Ext.define(‘MyApp.view.Main‘, {    extend: ‘Ext.tab.Panel‘,    plugins: ‘responsive‘,    responsiveConfig: {        landscape: {            tabPosition: ‘left‘        },        portrait: {            tabPosition: ‘top‘        }    },    items: [        { title: ‘Foo‘ },        { title: ‘Bar‘ }    ]});

規則

在responsiveConfig對象中的每一個鍵，或規則，只是一個簡單的javascript運算式。以下變數可用來作為responsiveConfig對象的規則：

•     ‘landscape’ - 如果裝置方向是豎向的，則為true (在電腦裝置總是為true)
•     ‘portrait’ - 如果裝置方向是橫向的，則為true(在電腦裝置總是為false)
•     ‘tall’ - 無論任何裝置，只要寬度小於高度，則為true
•     ‘wide’ - 無論任何裝置，只要寬頻大於高度，則為true
•     ‘width’ - viewport的寬度
•     height’ - viewport的高度
  

可以以不同的方式來組合這些變數來建立複雜的響應規則，例如，以下responsiveConfig會在viewport寬度少於768像素且高度大於它的寬度時隱藏組件：

responsiveConfig: {    ‘width < 768 && tall‘: {        visible: true    },    ‘width >= 768‘: {        visible: false    }}

哪一個配置會被響應？

在內部，架構會監控viewport的大小和方向的變化，並在任何這些事件發生時，重新計算所有的響應規則。在配置中的任何匹配的規則都會調用修改方法（setter），這意味著，對於用在responsiveConfig中的配置項，它必須有一個修改方法，如在以上樣本中能使用visible，是因為Ext.Component有一個setVisible方法。

讓類響應

responsiveConfig通常是用於組件的，不過有時可能需要讓類根據螢幕大小做出響應。對於非Ext.Component的類，可通過混入 Ext.mixin.Responsive來實現，例如，以下類的執行個體會在螢幕形狀從tall變為wide時更新foo的值，反之亦然。

Ext.define(‘MyClass‘, {    mixins: [‘Ext.mixin.Responsive‘],    config: {        foo: null    },    responsiveConfig: {        wide: {            foo: 1        },        tall: {            foo: 2        }    },    constructor: function(config) {        this.initConfig(config);    },    updateFoo: function(foo) {        console.log(foo); // logs "1" or "2" as screen shape changes between wide and tall    }});

試一試

為了確保使用Ext JS新的響應式設計特性所設計的真實應用程式能經得起考驗，我們建立了一個利用responsiveConfig以適應案頭與平板等廣泛螢幕尺寸和方向的應用程式，該應用程式可在這裡下載。

試著調整案頭瀏覽器視窗的大小或旋轉平板電腦，並觀察以下應用程式的表現和布局變化：

在wide模式，主導航將會定位在左邊，而咋top模式在定位在頂部。
在tall模式，標籤的表徵圖會對齊於頂部，而在wide模式會對齊於左邊。
在tall模式，標籤文本將會置中顯示，而在wide模式將會對齊於左邊。
在tall模式，螢幕對於導覽列來說會變得很窄，這時，將會顯示溢出菜單工具，並將導航條目顯示在菜單中。

我們確信Ext JS 5的這些新特性將會使跨裝置應用程式的開發變得容易，我們希望你們去試一下。說不定，這會很有樂趣！

Phil Guerrant
Phil is a Sencha software engineer who works on Ext JS. He has over 10 years of experience as a developer and specializes in HTML5 and web development, UI, and agile methodologies.