View Full Version : 4.1 b1 & b2 form overflow breaks resizing in firefox.

4 Feb 2012, 9:41 PM
I have a border layout and the center region is a form panel. the region is set to autoScroll:true. If the form is bigger than the region when the application loads than grid panels in other regions don't display properly and the viewport will not resize with the browser window. If I have the browser window large enough to begin with that the entire form fits. resizing the browser works fine and everything displays properly.

Anyone else seeing this? Am I doing something wrong or is this a bug?

It works as expected in chrome. didn't try IE.

5 Feb 2012, 9:01 AM
The layout also works fine with autoscroll set to false. of course then half my form is hidden. But it appears that autoscroll is what is causing the problem.

17 Feb 2012, 3:02 PM
Ok I looked at this again and I'm still having the layout issues I've narrowed it down a little further though.
it seems to have something to do with adding buttons to a form that has autoScroll true. See the example below.

*In firefox Size your browser window so that the form does not all fit. Then refresh the app. now try dragging the browser window bigger.

even worse than the resizing not working if there is a grid or a tree in another region they dont get rendered or actually I think they get rendered but are not visible.

If you remove the buttons from the form everything works.

Ext.onReady(function() {

var formPanel = Ext.create('Ext.form.Panel', {
frame: true,
title: 'Form Fields',
bodyPadding: 5,
region: 'center',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%'

items: [{
xtype: 'textfield',
name: 'textfield1',
fieldLabel: 'Text field',
value: 'Text field value'
}, {
xtype: 'textfield',
name: 'password1',
inputType: 'password',
fieldLabel: 'Password field'
}, {
xtype: 'filefield',
name: 'file1',
fieldLabel: 'File upload'
}, {
xtype: 'textareafield',
name: 'textarea1',
fieldLabel: 'TextArea',
value: 'Textarea value'
}, {
xtype: 'displayfield',
name: 'displayfield1',
fieldLabel: 'Display field',
value: 'Display field <span style="color:green;">value</span>'
}, {
xtype: 'numberfield',
name: 'numberfield1',
fieldLabel: 'Number field',
value: 5,
minValue: 0,
maxValue: 50
}, {
xtype: 'checkboxfield',
name: 'checkbox1',
fieldLabel: 'Checkbox',
boxLabel: 'box label'
}, {
xtype: 'radiofield',
name: 'radio1',
value: 'radiovalue1',
fieldLabel: 'Radio buttons',
boxLabel: 'radio 1'
}, {
xtype: 'radiofield',
name: 'radio1',
value: 'radiovalue2',
fieldLabel: '',
labelSeparator: '',
hideEmptyLabel: false,
boxLabel: 'radio 2'
}, {
xtype: 'datefield',
name: 'date1',
fieldLabel: 'Date Field'
}, {
xtype: 'timefield',
name: 'time1',
fieldLabel: 'Time Field',
minValue: '1:30 AM',
maxValue: '9:15 PM'

buttons: [{
text: 'Save'
text: 'Cancel'

var viewport = Ext.create('Ext.Viewport', {
layout: {
type: 'border',
padding: 5
defaults: {
split: true
items: [





17 Feb 2012, 6:53 PM
setting a width to the buttons fixes the problem.