PDA

View Full Version : dynamic panel height help



spinnerdog
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(){
load();
} }],
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()
});

masoud_tamizy
20 Feb 2012, 12:03 PM
use :
autoScroll (http://127.0.0.1/ext/docs/index.html#!/api/Ext.Component-cfg-autoScroll):true
instead of
scroll: true

spinnerdog
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.

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Panel

friend
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.

sskow200
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