ExtJS & Internet Explorer: Layout corruption with scrollbars
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:
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" />
<script type="text/javascript" src="http://dev.开发者_开发知识库sencha.com/deploy/dev/adapter/ext/ext-base.js"></script>
<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>
I know that this question is very similar to a previous question of mine, but I hope this time I'm more clear in what I am asking for. - And it relates to both IE7 and IE8.
I got this example working by wrapping the fieldset in a panel, and moving the autoscroll from the window to the panel:
MyWindow = Ext.extend(Ext.Window, {
resizable: true,
closable: true,
width: 400,
height: 200,
closeAction: 'hide',
title: 'Window',
layout: 'fit',
initComponent: function () {
var config = {
items: {
xtype: 'panel',
autoScroll: true,
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();
});
Couple notes:
- I had to give the window some height in order for it to show anything when opened
- Your original example works well in "Quirks Mode", which you can get by removing the DOCTYPE declaration at the top of your file.
I discovered that when giving the window:
bodyStyle: 'position:relative;'
the FieldSet stays inside the window. Why this is needed I don't know, neither how to set this attribute a more Extjs'y way.
If you have any comments, I welcome them in hope of enlightment :)
加载中,请稍侯......
精彩评论