ExtJS 和 Internet Explorer：带有滚动条的布局损坏答案

【问题标题】：ExtJS & Internet Explorer: Layout corruption with scrollbarsExtJS 和 Internet Explorer：带有滚动条的布局损坏
【发布时间】：2011-03-31 21:35:45
【问题描述】：

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

窗口可调整大小，我希望在用户将窗口大小调整为小于显示其内容所需的大小时显示滚动条。

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

为什么我会在 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>

我知道这个问题与我的previous question 非常相似，但我希望这次我更清楚我的要求。 - 它与 IE7 和 IE8 都有关。

【问题讨论】：

标签： javascript internet-explorer layout extjs corruption

【解决方案1】：

我通过将字段集包装在面板中并将自动滚动从窗口移动到面板来实现此示例：

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();
});

情侣笔记：

我必须给窗口一些高度，以便它在打开时显示任何内容
您的原始示例在“Quirks Mode”下运行良好，您可以通过删除文件顶部的 DOCTYPE 声明来获得该模式。

【讨论】：

【解决方案2】：

我在给窗口的时候发现：

bodyStyle: 'position:relative;'

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

如果你有cmet，我欢迎他们，希望得到启发:)

【讨论】：