面板可滾動時的固定高度？

Question

以下代碼顯示了我在當前應用中使用的某個視圖的定義，這意味着此視圖很容易創建，並且應該在顯示時將其添加到Ext.Viewport。

它的結構非常簡單：有一個與下方的面板工具欄，其中可以包含任何其他組件，如按鈕，面板等

但是：我的問題是，既然我添加的配置滾動：真（如下圖所示），我還必須爲該面板設置固定的高度（在這種情況下爲300）。如果我沒有設置高度，面板中的所有組件都不會顯示。

更糟糕的問題是，我不知道什麼高度我應該在這裏設置，因爲我的應用程序當然應該適用於不同屏幕尺寸（iPhone/iPad/...）的不同設備。

所以我想要實現的是工具欄下的面板使用完全可用的高度，並且在內容比自身高度高的情況下它應該是可滾動的。希望你能幫助我與:-)

Ext.define('PV.view.Menu', { 
    extend: 'Ext.Panel', 

    xtype: 'menu', 

    config: { 
     items: [ 
      { 
       xtype: 'toolbar', 
       title: 'My Menu' 
      }, 
      { 
       xtype: 'panel', 
       scrollable: true, 
       height: 300, 
       items: [ 
        { 
         xtype: 'button', 
         text: 'Navigate to view 1 >', 
         action: 'nav-to-view1' 
        }, 
        { 
         xtype: 'button', 
         text: 'Navigate to view 2 >', 
         action: 'nav-to-view2' 
        }, 
        { 
         html: 'A lot of text<br />A lot of text<br />A lot of text<br />A lot of text<br />A lot of text' 
        } 
       ] 
      } 
     ] 
    } 
}); 

Answer 1

您正在尋找layout:'fit'，以及（可能）minHeight

http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-minHeight

http://docs.sencha.com/touch/2-0/#!/api/Ext.layout.Fit

config: { 
    layout:'fit', 
    items: [ 
     { 
      xtype: 'toolbar', 
      title: 'My Menu' 
     }, 
     { 
      xtype: 'panel', 
      scrollable: true, 
//    height: 300, 
      items: [ 
       { 
        xtype: 'button', 
        text: 'Navigate to view 1 >', 
        action: 'nav-to-view1' 
       }, 
       { 
        xtype: 'button', 
        text: 'Navigate to view 2 >', 
        action: 'nav-to-view2' 
       }, 
       { 
        html: 'A lot of text<br />A lot of text<br />A lot of text<br />A lot of text<br />A lot of text' 
       } 
      ] 
     } 
    ] 
}