PDA

View Full Version : [CLOSED] Column Layout manageOverflow



pedrobaracho
13 Nov 2012, 7:50 AM
REQUIRED INFORMATION

Ext version tested:

Ext 4.1.1a
Browser versions tested against:

Chrome 23
IE9.0 (no bug)
FF16
Opera 12
DOCTYPE tested against:

No DOCTYPE specified
Description:

I created a Ext.window.Window with two areas. An upper area with some fields in Column Layout and a lower area with another panel.
My window has fit layout.
Inside the window there is only one item: a form (for submitting and validation purposes)
The form is using Anchor layout and has 2 items: a container and a panel.
The container is using column layout, has fixed height and flexible width.
The panel has flexible width and height.
Because the container height is smaller than necessary, the Layout Manager reserves a space of 17px for the vertical scrollbar, even if I set autoScroll false.
Also, the browser does not render any scrollbar in that space, which leaves a blank space on the right, looking like a margin-right problem.
Setting: manageOverflow to 0, solves the problem.
Also, changing xtype from container to panel (without border, frame, etc.) solves the problem too.
Steps to reproduce the problem:

Run the attached code
The result that was expected:

No blank space
Aligned containers
The result that occurs instead:

Layout manager reserves a space of 17px for the vertical scrollbar that is not rendered by the browser, which looks like a margin-right problem for the end user.
Test Case:


<html><header>
<link rel="stylesheet" type="text/css" href="ext-4.1.1a/resources/css/ext-all-gray.css" />
<script type="text/javascript" src="ext-4.1.1a/ext-all-debug.js"></script>
<script>
Ext.onReady(function(){
Ext.create('Ext.window.Window', {
title: 'Layout bug',
width: 600,
height: 600,
layout: 'fit',
border: false,
items: [{
xtype: 'form',
bodyPadding: 13,
frame: true,
layout: 'anchor',
items: [{
xtype: 'container',
layout: 'column',
anchor: '100%',
height: 200,
defaults: {
labelAlign: 'top',
style: 'margin: 5px'
},
items: [{
xtype: 'textfield',
fieldLabel: 'field1',
columnWidth: .3
},{
xtype: 'textfield',
fieldLabel: 'field2',
columnWidth: .4
},{
xtype: 'textfield',
fieldLabel: 'field3',
columnWidth: .3
},{
xtype: 'textfield',
fieldLabel: 'field4',
columnWidth: .3
},{
xtype: 'textfield',
fieldLabel: 'field5',
columnWidth: .4
},{
xtype: 'textfield',
fieldLabel: 'field6',
columnWidth: .3
},{
xtype: 'textarea',
fieldLabel: 'field7',
columnWidth: 1,
height: 70
}]
},{
xtype: 'panel',
anchor: '100% -200',
title: 'My grid Panel that expands vertically with the window'
}]
}],
buttons: [{
text: 'Ok'
},{
text: 'Cancel'
}]
}).show();
});
</script>
</header>
<body>
</body>
</html>


HELPFUL INFORMATION

Screenshot or Video:

attached
40007

Debugging already done:

none
Possible fix:

not provided
Additional CSS used:

only default ext-all.css
Operating System:

Windows 7 Home Premium 64

mitchellsimoens
13 Nov 2012, 4:56 PM
Thanks for the report! I have opened a bug in our bug tracker.

mrjari
10 Jul 2013, 6:53 AM
This seams to be fixed in version 4.2.1 but not in 4.2 (as seen also in http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/portal/portal.html and http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/portal/portal.html (http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/portal/portal.html))