PDA

View Full Version : [INFOREQ] Fieldset not resizing properly



rhamflett
19 Nov 2010, 1:43 AM
I'm seeing an issue where a fieldset isn't resizing properly. I have a panel which I'm resizing with 2 functions to toggle it back and forth between two heights. I call getHeight(), add or subtract a value from that and then call setHeight(). If I change the xtype from 'form' to 'fieldset' then the panel loses some of it's original height every time it's resized. As a sanity check I put in a second call to getHeight() after I resize it, and the value I get back is 1 less than the value I just passed to setHeight().

I'm seeing this on Firefox 3.6.12 and Chrome 7.0.517.44. Bizarrely, the opposite happens on IE 8.0.6001.18702, where the height increases.

Does anyone know what's going on? I'm using ext 3.3.0.

Thanks,
Rob

meroy
4 Dec 2010, 3:33 AM
Can you provide a test case by following this thread. Thanks.

http://www.sencha.com/forum/showthread.php?71015-Posting-to-the-Bug-Forum

rhamflett
6 Dec 2010, 2:37 AM
Ext version tested:

Ext 3.3.0


Adapter used:

ext


css used:

only default ext-all.css


Browser versions tested against:

Opera 10.53 (build 3374) - OK
Opera 10.63 (build 3516) - OK
IE 8.0.6001.18702 - problem occurs
Firefox 3.6.3 - problem occurs
Firefox 3.6.12 (firebug 1.6.0 installed) - problem occurs
Chrome 5.0.375.70 - problem occurs
Chrome 8.0.552.215 - problem occurs
Safari 5.0 (7533.16) - problem occurs
Safari 5.0.3 (7533.19.4) - problem occurs


Operating System:

WinXP Pro x86


Description:
I'm seeing an issue where a fieldset isn't resizing properly. I have an outer fieldset which contains a checkbox and an inner field set. The inner fieldset has been indented using containers to achieve the desired layout. With this layout, collapsing the inner fieldset does not update the height of the outer fieldset, so I am using an event to do this. Each time the fieldset is toggled, the height of the outer fieldset is reduced, compared to the original value, as the height value read does not match the value it was previously set to (see Debugger steps further down). Bizarrely, the opposite happens on Internet Explorer, where the height increases.

Test Case:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/ext-3.3.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="/ext-3.3.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext-3.3.0/ext-all-debug.js"></script>
<script type="text/javascript">
OptionsPanelUi = Ext.extend(Ext.form.FormPanel, {
width: 600,
padding: 10,
autoHeight: true,
id: 'optionsPanel',
initComponent: function() {
this.items = [
{
xtype: 'fieldset',
title: 'Outer fieldset',
padding: 5,
collapsible: true,
id: 'optionsOuter',
items: [
{
xtype: 'checkbox',
boxLabel: 'checkbox to enable sub-settings',
anchor: '100%',
hideLabel: true,
id: 'chkBox'
},
{
xtype: 'container',
layout: 'hbox',
autoHeight: true,
items: [
{
xtype: 'container',
flex: 1,
autoHeight: true
},
{
xtype: 'fieldset',
title: 'Inner field set',
flex: 20,
collapsible: true,
autoHeight: true,
id: 'optionsInner'
}
]
}
]
}
];
OptionsPanelUi.superclass.initComponent.call(this);
}
});

Ext.namespace('DBSOptionsPanel');
DBSOptionsPanel.g_heightOptionsInnerCollapse = 0;
DBSOptionsPanel.g_heightOptionsInnerExpand = 0;

DBSOptionsPanel.OptionsInner_BeforeCollapse = function(panel)
{
DBSOptionsPanel.g_heightOptionsInnerCollapse = Ext.getCmp('optionsInner').getHeight();
};

DBSOptionsPanel.OptionsInner_BeforeExpand = function(panel)
{
DBSOptionsPanel.g_heightOptionsInnerExpand = Ext.getCmp('optionsInner').getHeight();
};

DBSOptionsPanel.OptionsInner_Collapse = function(panel)
{
var panelOuter = Ext.getCmp('optionsOuter');
var hBroker = panelOuter.getHeight();
var heightAfterCollapse = Ext.getCmp('optionsInner').getHeight();
var diff = DBSOptionsPanel.g_heightOptionsInnerCollapse - heightAfterCollapse;
panelOuter.setHeight(hBroker - diff);
DBSOptionsPanel.g_heightOptionsInnerCollapse = 0;
};

DBSOptionsPanel.OptionsInner_Expand = function(panel)
{
var panelOuter = Ext.getCmp('optionsOuter');
var hBroker = panelOuter.getHeight();
var heightAfterExpand = Ext.getCmp('optionsInner').getHeight();
var diff = heightAfterExpand - DBSOptionsPanel.g_heightOptionsInnerExpand;
panelOuter.setHeight(hBroker + diff);
DBSOptionsPanel.g_heightOptionsInnerExpand = 0;
};

OptionsPanel = Ext.extend(OptionsPanelUi, {
initComponent: function() {
OptionsPanel.superclass.initComponent.call(this);

var panelOuterSettings = Ext.getCmp('optionsInner');
panelOuterSettings.on('beforecollapse', DBSOptionsPanel.OptionsInner_BeforeCollapse);
panelOuterSettings.on('collapse', DBSOptionsPanel.OptionsInner_Collapse);
panelOuterSettings.on('beforeexpand', DBSOptionsPanel.OptionsInner_BeforeExpand);
panelOuterSettings.on('expand', DBSOptionsPanel.OptionsInner_Expand);
}
});
Ext.reg('x-options-panel', OptionsPanel);

OptionsContainer = Ext.extend(Ext.Container, {
layout:'absolute',
autoScroll:true,
initComponent: function() {
this.items = [
{
xtype:'x-options-panel'
}];
OptionsContainer.superclass.initComponent.call(this);
}
});
Ext.reg('x-options-container', OptionsContainer);

UIViewportUi = Ext.extend(Ext.Viewport, {
layout: 'border',
id: 'vp',
initComponent: function() {
this.items = [
{
xtype: 'tabpanel',
activeTab: 0,
region: 'center',
enableTabScroll: true,
ref: 'vpTabPanel',
id: 'vpTabPanel'
}
];
UIViewportUi.superclass.initComponent.call(this);
}
});

UIViewport = Ext.extend(UIViewportUi, {
initComponent: function() {
UIViewport.superclass.initComponent.call(this);
Ext.getCmp('vpTabPanel').add(
{
title:'Options',
id:'tabOptions',
closable:true,
xtype:'x-options-container'
});
}
});

Ext.onReady(function() {
Ext.QuickTips.init();
Ext.BLANK_IMAGE_URL='/content/repro/resources/images/s.gif';
var cmp1 = new UIViewport({
renderTo: Ext.getBody()
});
cmp1.show();
});
</script>
</head>
<body></body>
</html>



Steps to reproduce the problem:

Repeatedly collapse and expand the inner field set until the control starts being covered up.


The result that was expected:

The heights when expanded and collapsed are constant.



The result that occurs instead:

Height is slowly decreased (on Chrome, Firefox and Safari)
Height is slowly increased (on IE)


Screenshot or Video:

attached


Debugging already done:

Adding a call to getHeight() after the call to setHeight() returns a value 1 less than the value passed to setHeight().


Possible fix:

not provided