How to get panel within vbox layout to fill container?

0
votes

I'm having trouble getting a panel to fill the space within its container panel. The container is a panel with a vbox layout having two child panels. I looked at Extjs how to set 100% height for vbox panel and have something similar but it doesn't seem to work.

Screenshots:- http://i.imgur.com/nAbCr.png The screenshot is from when i use a 'fit' layout or dont even have the combobox or optionsview in a containing panel. So, what i want is for the 'options' panel to extend all the way down till the 'results' panel. with the present vbox layout this is what i get - 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'
                }
            }]
        }]
    }]
});
2
javascriptlayoutextjspanel

2 Answers

2
votes

The value of height: should be a number, not a string. So use height: 50 instead.

1
votes

I think you have it close to what you need. Couple of observations: 1. Heights need to be set as integers (no px suffix) 2. Each container that will have children should have a layout defined for them, even though there is default - it might not be what you want.

Here is your layout working reasonably well http://jsfiddle.net/dbrin/NJjhB/

One other suggestion I would add is to use a tool like Illuminations for Developers - a firebug plugin that knows about ExtJS framework.