ExtJS和Internet Explorer:滚动条的布局损坏

Cha*_*hau 5 javascript layout internet-explorer extjs corruption

我在使用Internet Explorer时遇到了一些问题.我有Window一个Fieldset包含一些Components- 所有ExtJS元素.

窗口是可调整大小的,当用户将窗口大小调整为小于显示其内容所需的大小时,我希望滚动条显示.

这在FireFox 3.6.x中运行良好,但在使用IE7或IE8时,我得到以下结果:

Internet Explorer中的布局已损坏

为什么我在Internet Explorer中得到这个结果,不应该做我想做的事情?

用于生成上述结果的代码是:

<!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>
Run Code Online (Sandbox Code Playgroud)

我知道这个问题与我之前的一个问题非常相似,但我希望这次我能更清楚地了解我的要求. - 它与IE7和IE8有关.

Cha*_*hau 1

我发现在给窗口时:

bodyStyle: 'position:relative;'
Run Code Online (Sandbox Code Playgroud)

FieldSet保留窗口内。我不知道为什么需要这个,也不知道如何以更Extjs 的方式设置这个属性。

如果大家有什么意见欢迎留言,希望不吝赐教:)