PDA

View Full Version : Internet Explorer: Layout corruption with scrollbars



Chau
11 Mar 2011, 5:50 AM
I am having some problems with Internet Explorer. I have a Window with one Fieldset containing a few Components - all ExtJS elements.


The window is resizable and I want the scrollbars to appear when the user resizes the window to a size smaller than the size required to show its contents.


This works fine in FireFox 3.6.x, but when using IE7 or IE8 I get the following result:


25091


Why do I get this result in Internet Explorer and shouldn't it be possible to do what I want?


The code used to generate the above result is:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Online example</title>
<link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/dev/resources/css/ext-all.css" />

<!-- LIBS -->
<script type="text/javascript" src="http://dev.sencha.com/deploy/dev/adapter/ext/ext-base.js"></script>

<!-- ENDLIBS -->

<script type="text/javascript" src="http://dev.sencha.com/deploy/dev/ext-all.js"></script>

</head>
<body>

<script type="text/javascript">

Ext.onReady(function(){

MyWindow = Ext.extend(Ext.Window, {
resizable: true,
closable: true,
width: 400,
closeAction: 'hide',
title: 'Window',
autoScroll: true,
layout: 'fit',

initComponent: function () {

var config = {
items:
[
{
xtype: 'fieldset',
title: 'Fieldset',
layout: 'form',
items:
[
{
xtype: 'numberfield',
fieldLabel: 'Label'
}, {
xtype: 'checkbox',
fieldLabel: 'Label',
checked: true
}, {
xtype: 'checkbox',
fieldLabel: 'Label',
checked: true
}, {
xtype: 'checkbox',
fieldLabel: 'Label',
checked: true
}
]
}
]
}

Ext.apply(this, config);

// Config object has already been applied to 'this' so properties can
// be overriden here or new properties (e.g. items, tools, buttons)
// can be added, eg:

// Call parent (required)
MyWindow.superclass.initComponent.apply(this, arguments);
}
});

AWindow = new MyWindow();
AWindow.show();
});

</script>

</body>
</html>

walldorff
11 Mar 2011, 2:07 PM
I tested your code and autoWidth/autoHeight gave the desired result.
xtype: 'fieldset',
title: 'Fieldset',
layout: 'form',
autoWidth: true,
autoHeight:true,
items:

Chau
14 Mar 2011, 1:28 AM
It didn't work for me. Inspecting the resulting set of CSS parameters showed me that everything works fine if I add


position: relative

to the DIV containing the FieldSets.

I don't know how to do this through the ExtJS model other than using the style property. It feels like doing it the wrong way :s