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/

Sencha Ext Panel使高度100％

1 个答案: