View Full Version : Vertical Scrollbars for my VBOX panel

14 Mar 2011, 7:05 PM
I have a simple app, considering of a viewport emcompassing my whole browser, a single panel (layout:vbox) within it, and multiple panels within it. Below is a bit of pseduo code to demonstrate this design:

new Ext.Viewport({
layout: 'fit',
new Ext.Panel({
title:"VBOX Section",
id: "vbox-panel",
new Ext.Panel({
title:"Panel A",
html:"Lots of text!<br/><br/><br/><br/><br/><br/>Text!",
new Ext.Panel({
title:"Panel B",
html:"Even more text!<br/><br/><br/><br/><br/><br/>Text and lines!<br/><br/>br/>",

So, even when my panels (and I often have more than 2, but that's just an example), grow past the end of the page, scrollbars do not appear in the vbox scroll area. Anyway to make this happen?
Few Notes: the amount of internal Panels (Panel A, B, etc) is not known until runtime, and the height may vary. For that reason, I'm not specifying the height of any panel.
I don't know the height of the viewport, so can't specify a height there.

Appreciate any help.

15 Mar 2011, 7:54 AM
Reading through some more forum posts on the issue, it seems that VBOX layouts likely use the overflow:hidden css property, so no scroll bars will ever been seen when using them. That seems a bit counter-intuitive (or at least should be pointed out in the documentation).

VBOX layouts are directed as the layout to choose if you want to display data in a vertical fashion, but the exclusion of scroll bars makes this a feature that's a bit tougher to use effectively. (In the age of phones, tablets, and widescreen monitors, relying on screen resolution and size is a losing proposition).

So, I'm going to start changing my vbox layout to a layout of another type, hopefully that will find success. I'll report back any success (and i'm still open for suggestions).

15 Mar 2011, 8:25 AM
the VBOX layout is used to fit the items into a given space using a special ratio (flex).
In your case use a simple panel with items and autoScroll.

3 May 2016, 7:10 AM
I have added a listener on resize event to get the vertical scroll as for Vbox we have to provide height to get scroll but when window size get change the height remain constant.

Ext.define('DataConfigurations', {
extend: 'Ext.form.Panel',
bodyStyle: 'padding:5px 5px;',
listeners: {
resize: {
fn: function(el) {
this.setHeight(this.up('window').getHeight()-150); // 150 is extra for my panel coz of headers so have minus it.
console.log("new height = " + this.up('window').getHeight()-150);
header: {
xtype: 'header',
titlePosition: 0,
title: "Notification List Configurations",
items: [
xtype: 'Event'
title: "Update Data Configurations",

Hopes this help.