PDA

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



charris
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!

29738

tvanzoelen
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

tvanzoelen
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
}
});

fieldset1.add(dummyFields);

me.items.push(fieldset1);
me.items.push(fieldset1.cloneConfig({
title: 'User 2',
items: dummyFields
}));
me.items.push(fieldset1.cloneConfig({
title: 'User 3',
items: dummyFields
}));

me.callParent();
}
});

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]
});
});

charris
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!