Question

我无法让面板填充其容器面板中的空间。容器是具有vbox布局的面板，其具有两个子面板。我看了Extjs how to set 100% height for vbox panel 并且有类似但似乎不起作用。

截图： - http://i.imgur.com/nAbCr.png 屏幕截图来自我使用“适合”布局时，或者甚至没有在包含面板中使用组合框或选项视图。所以，我想要的是'选项'面板一直延伸到'结果'面板。使用现有的vbox布局，这就是我得到的 - http://i.imgur.com/cB0k1.png

Ext.define('PA.view.CreateReportView', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.createreportview',
    id: 'createreport-panel',
    requires: [
        'PA.view.OptionsView', // options panel
    'PA.common.Connection'],

    title: 'Create Report',
    items: [{
        xtype: 'panel',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            xtype: 'panel',
            border: false,
            height: '50px',
            items: [{
                xtype: 'combobox',
                ....
            }]
        }, {
            xtype: 'panel',
            border: false,
            flex: 1,
            items: [{
                xtype: 'optionsview', // options panel
                style: {
                    paddingTop: '10px'
                }
            }]
        }]
    }]
});

Answer 1

height:的值应该是数字，而不是字符串。所以请改用height: 50。

Answer 2

我认为你接近你需要的东西。几点意见： 1.高度需要设置为整数（没有px后缀） 2.每个拥有子项的容器都应该为它们定义一个布局，即使有默认值 - 它可能不是您想要的。

这是您的布局合理运作http://jsfiddle.net/dbrin/NJjhB/

我要补充的另一个建议是使用像Illuminations for Developers这样的工具 - 一个了解ExtJS框架的firebug插件。

如何让vbox布局中的面板填充容器？

2 个答案: