如何在 vbox 布局中获取面板以填充容器？

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 框架的萤火虫插件。