可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have created this very simple window extension. In Firefox it looks like it should, but in IE7, the contained items flow out of the window.

What can I do to fix this?

Code: (Doctype is strict, but won't display for some reason)

<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>

回答1:

Is there any reason for the overflow at all? I mean, an Ext.Window should not really have scroll bars imho, I changed your code so it removes the scroll bars, and it should also remove the element overflow bug in 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();

Let me know if this isn't the case...

回答2:

I think Jaitsu already got the main issue here (the use of autoScroll: true), but I have to point out one other flaw.

Why are you writing to initialConfig?

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

initialConfig should only contain the config that is passed to the constructor of the component. And it is used when cloning the component. Even the docs say it is read-only. If you aren't 100% sure then don't do it. Besides, I don't see why you would want to do it. Your component will work just fine when you write initComponent like so:

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