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％

回答

相关问题