原文：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.

轉載于:https://www.cnblogs.com/muyuge/p/6333662.html

總結

以上是生活随笔為你收集整理的【翻译】使用Ext JS设计响应式应用程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。