CODEWITHSUNDEEP
extjsinternet-explorer-7rendering
Chau
Chau

Reputation: 5570

ExtJS & IE7: Rendering problems with simple window

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.

Wrong rendering in IE

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>

Upvotes: 1

Views: 5554

Answers (2)

Rene Saarsoo
Rene Saarsoo

Reputation: 13937

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

Upvotes: 2

JamesHalsall
JamesHalsall

Reputation: 13505

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

Upvotes: 2

Related Questions