Sencha Touch：如何設置不同設備的浮動面板大小？

Question

我是Sencha Touch的新手（經驗豐富的ExtJS）。在我的應用程序中，我需要創建一些浮動面板作爲模態對話框。現在，我很困惑如何設置這些浮動面板的大小，這將根據設備適當調整大小。

我是否需要獲取瀏覽器的高度/寬度並適當設置大小，或者是否需要提供一些百分比的大小？

任何幫助？

Answer 1

要動態控制面板的寬度，您可以使用面板中的「寬度」參數。

您可以在此寬度內強制您自己的值，但您也可以根據視口製作一個動態設置寬度的函數。

例如，一個模態面板;

var editPnl = new Ext.Panel({ 
     floating: true, 
     centered: true, 
     modal: true, 
     draggable: true, 
     width: calculateDesiredWidth(), 

並且調用函數來計算體面寬度;

var calculateDesiredWidth = function() { 
     var viewWidth = Ext.Element.getViewportWidth(), 
      desiredWidth = Math.min(viewWidth, 400) - 10; 

     return desiredWidth; 
    }; 

如果我誤解了你的問題，請說出來。

Answer 2

要做你的要求，你可以定義一個函數來查看用戶設備的類型，並根據它設置「width」和「height」參數，或者你甚至可以做到這一點。 我發佈一個例子來告訴你，如果你使用的是手機或平板設備如何改變你的面板尺寸：

內嵌例

var myPanel = new Ext.Panel({ 
    floating: true, 
    centered: true, 
    modal: true, 
    draggable: true, 
    width: (Ext.is.Phone ? 200 : 600), 
    height: (Ext.is.Phone ? 300 : 800) 
}); 

你甚至可以在這個不同的手機類型的目標方法：

var myPanel = new Ext.Panel({ 
    floating: true, 
    centered: true, 
    modal: true, 
    draggable: true, 
    width: getPanelSize('width'), 
    height: getPanelSize('height') 
}); 

然後在你的代碼中定義瞭如下功能：

getPanelSize = function(sizeType){ 

    switch(sizeType){ 

     case 'width': 

      if(Ext.is.iPhone) return 200; 
      if(Ext.is.Blackberry) return 150; 
      if(Ext.is.Android) return 180; 

      break; 

     case 'height': 

      if(Ext.is.iPhone) return 300; 
      if(Ext.is.Blackberry) return 100; 
      if(Ext.is.Android) return 150; 

      break; 

    } 

} 

希望這有助於。