View Full Version : dynamic panel height help

20 Feb 2012, 11:55 AM
i have a defined a panel (listed below) that needs to be dynamic in height. if I remove the "height:" property it only draws the title bar.

I thought this was due to me doing something wrong but I found the 3rd example in the docs has the same feature/fault.

How do you get a dynamic panel height?

Ext.create('Ext.panel.Panel', {
title: 'dev1.punchoutcatalogs.net',
collapsible: true,
height: 270,
width: 225,
scroll: true,
tools: [{
type: 'refresh',
hidden: false,
handler: function(){
} }],
layout: {
type: 'vbox', // Arrange child items vertically
align: 'stretch', // Each takes up full width
padding: 5
defaults: { margin: 1 },
items : [ myself.dfp, myself.memp, myself.uptimefs, myself.whofs ],
renderTo: Ext.getBody()

20 Feb 2012, 12:03 PM
use :
autoScroll (!/api/Ext.Component-cfg-autoScroll):true
instead of
scroll: true

20 Feb 2012, 12:19 PM
changing from scroll: true to autoScroll:true didn't fix it. Try it in the docs here on the 3rd example. For me, replacing the height property with autoScroll: true produces only the title bar.


20 Feb 2012, 12:55 PM
The problem you're having is all about layout. Since you're rendering your panel to Ext.getBody(), the panel doesn't have a parent container which uses/interacts with ExtJs's layout system, so it doesn't participate in the dynamic resizing which ExtJs offers.

You can fix your problem by adding an Ext.container.Viewport to the page, specifying a layout of 'fit' (or 'border', if you like, assuming that you add region: 'center' to your panel). Remove the height attribute from your panel, then add it to the Viewport and it should work as expected.

20 Feb 2012, 1:16 PM
A cheap way could be to do something like this...

Ext.create('Ext.panel.Panel', {
title: 'Test Panel',
html: 'Body of Test Panel',
height: window.innerHeight

Beware of cross-browser incompatibility