View Full Version : [4.0.7] Missing scrollbars on form panel

1 Dec 2011, 3:54 PM
I have a form panel with autoScroll=true, but the scrollbars aren't showing up. There's a working example of it here that anyone can fork and modify: http://jsfiddle.net/clint_harris/Bt6w9/ (also, see screenshot below)

Any ideas? Maybe it has something to do with how I'm adding items in my form panel's initComponent() function?

The actual app is 1 page with a Viewport set to use the 'fit' layout. It has a few tabs. My form panel goes in one of those tabs, and I want just the form to scroll (not the whole viewport).

I'm using ExtJS 4.0.7 and have also tried 4.1 PR1 to see if it makes a difference--it didn't.

Thanks for any help/advice!


2 Dec 2011, 4:22 AM
That fiddle thing is probably messing it up. The app must be run in the Application launch function or directly under Ext.onReady function.

First check if the bug is there if the app runs outside fiddle

2 Dec 2011, 4:31 AM
Checked isn't working outside Fiddle either. If I take out vbox layout you get scollers. It has something to do with that vbox layout config.

vbox is used for something like this, I think, that is divides the available space with the flex property.

Ext.onReady(function() {

Ext.define('myapp.MyFormPanel', {
extend: 'Ext.form.Panel',
alias: 'widget.myapp.MyFormPanel',
initComponent: function() {
var me = this;
me.bodyPadding = 20;
me.defaults = {
labelWidth: 100,
labelAlign: 'left'
me.layout = {
type: 'vbox',
align: 'stretch'
me.autoScroll = true; // <--- Why isn't this working?

me.items = [];

var dummyFields = [{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name',
value: 'Pete Schweddy'
}, {
xtype: 'displayfield',
fieldLabel: 'Some Info',
value: 'Derp.'
}, {
xtype: 'checkboxgroup',
fieldLabel: 'Roles',
columns: 1,
items: [
{ boxLabel: 'Butcher', name: 'roles' },
{ boxLabel: 'Baker', name: 'roles' },
{ boxLabel: 'Candlestick Maker', name: 'roles' }

var fieldset1 = Ext.create('Ext.form.FieldSet', {
title: 'User 1',
margin: '0 3 7 0',
height: 200,
padding: 20,
autoScroll: true,
flex: 3,
layout: {
type: 'vbox',
align: 'stretch' // child items stretch horizontally to fill container


title: 'User 2',
items: dummyFields
title: 'User 3',
items: dummyFields


var formPanel = Ext.create('myapp.MyFormPanel', {
title: 'Tab 1'

var tabPanel = Ext.create('Ext.tab.Panel', {
height: 150,
//autoScroll: true,
items: [formPanel]

Ext.create('Ext.container.Viewport', {
layout: 'fit',
renderTo: Ext.getBody(),
items: [tabPanel]

2 Dec 2011, 7:07 AM
Solution: use layout=auto instead of vbox. If anyone is curious:

Before: http://jsfiddle.net/clint_harris/Bt6w9/
After: http://jsfiddle.net/clint_harris/Wqb82/
Thanks to tvanzoelen for isolating the issue to the vbox layout!