Sencha Ext Panel 使高度 100%

Question

我有以下包含两个面板的应用程序。第一个面板的高度设置为屏幕区域的 75%，第二个面板设置为占据屏幕底部的 25%。我已经为此工作了几个小时，并且我应该占据屏幕底部 25% 的第二个面板中包含的按钮始终显示在顶部。我是 Sencha 和 JS 的新手，任何帮助将不胜感激：

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]
            });
        }); 
    }
});

Answer 1

您可以尝试使用面板的 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/