Question

我创建了这个非常简单的 window 扩展名。在Firefox中看起来应该如此，但在IE7中，所包含的项目会流出窗口。

Wrong rendering in IE

我该怎么做才能解决这个问题？

代码：（Doctype严格，但由于某种原因不会显示）

<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, {
        layout: 'fit',
        width: 370,
        height: 500,
        resizable: true,
        closable: true,
        closeAction: 'hide',
        collapsible: true,
        autoScroll: true,
        bodyStyle: 'padding:5px;',
        title: 'Window',

        initComponent: function () {

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

            Ext.apply(this, Ext.apply(this.initialConfig, 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>

Answer 1

是否有任何原因导致溢出？我的意思是，一个Ext.Window不应该真的有滚动条imho，我改变了你的代码，所以它删除了滚动条，它也应该删除IE中的元素溢出错误：

Ext.onReady(function(){

MyWindow = Ext.extend(Ext.Window, {
    resizable: true,
    closable: true,
    width: 400,
    closeAction: 'hide',
    collapsible: true,
    bodyStyle: 'padding:5px;',
    title: 'Window',

    initComponent: function () {

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

        Ext.apply(this, Ext.apply(this.initialConfig, 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();

如果情况不是这样，请告诉我......

Answer 2

我认为Jaitsu已经在这里遇到了主要问题（使用autoScroll: true），但我必须指出另一个缺陷。

你为什么写信给initialConfig？

initComponent: function () {
    var config = {
        ...
    };
    Ext.apply(this, Ext.apply(this.initialConfig, config));

initialConfig应该只包含传递给组件构造函数的配置。它在克隆组件时使用。甚至文档都说它是只读的。如果你不是100％肯定，那就不要这样做。此外，我不明白你为什么要这样做。当您编写initComponent时，您的组件将正常工作：

initComponent: function () {
    // you can set all the config options directly to this.
    this.items = [
        ...
    ];
    MyWindow.superclass.initComponent.call(this);
}

ExtJS＆amp; IE7：使用简单窗口渲染问题

2 个答案: