Sencha分機面板使高度100％

我有以下應用程序包含兩個面板。第一個屏幕的高度設置爲屏幕區域的75％，第二個屏幕的高度設置爲佔屏幕底部的25％。我一直在爲此工作了幾個小時，而第二個面板中包含的應該佔據屏幕底部25％的按鈕總是顯示在頂部。我是新來的煎茶和JS任何幫助，將不勝感激：Sencha分機面板使高度100％

Ext.application({ 
    name : 'MyApp', 
    launch : function() 
    { 
     Ext.onReady(function() 
     {        
      var panel = Ext.create('Ext.panel.Panel', { 
       title: 'Test 2', 
       autoScroll: true, 
       forceFit: true, 
       layout: { type: 'vbox', align: 'fit', padding: 5}, 
       items: 
       [ 
        { xtype: 'panel', height: '75%', layout: { type: 'vbox', align: 'fit', padding: 5}}, 
        { xtype: 'panel', height: '25%', layout: { type: 'vbox', align: 'fit', padding: 5}, items:[ { itemId: 'btnNewMission', xtype: 'button', height: 25, width: 125, text: 'New Mission' } ]} 
       ] 
      }); 

      var viewport = Ext.create('Ext.container.Viewport', { 
       layout: 'fit', 
       items: [panel] 
      }); 
     }); 
    } 
});

來源

2014-10-02 Josh

您可以嘗試使用Flex屬性面板，而是採用百分比，設置面板1以適應整個高度和麪板2一個特定的高度，就像下面的代碼：

 layout: { type: 'vbox', align: 'stretch', padding: 5}, 
     items: 
      [ 
       { xtype: 'panel', flex: 1, layout: { type: 'vbox', align: 'fit', padding: 5}}, 
       { xtype: 'panel', height: 100, layout: { type: 'vbox', align: 'fit', padding: 5},   
      items:[ 
       { itemId: 'btnNewMission', xtype: 'button', height: 25, width: 125, text: 'New Mission' }  
       ]} 
     ]

您可以查看下面的例子：http://jsfiddle.net/rx7Lfo55/

來源

2014-10-02 21:50:44 lombardo

我仍然收到了錯誤的行爲，其中按鈕是在頁面的頂部，而不是在底部像打算？ – Josh 2014-10-06 12:19:12

你可以把按鈕放在一個bbar配置中，如下所示：bbar：[ {xtype：'button'，text：'Button 1'} ]，我更新了鏈接[http：// jsfiddle達網絡/ rx7Lfo55/1 /（http://jsfiddle.net/rx7Lfo55/1/） – lombardo 2014-10-06 15:05:57

Sencha分機面板使高度100％

回答

相關問題