ExtJS & IE7: Rendering Probleme mit einfachen Fenster

Erstellt habe ich dieses sehr einfache Fenster Erweiterung. Im Firefox sieht es aus wie es soll, aber im IE7, die enthaltenen Elemente fließen aus dem Fenster.

Was kann ich tun um dies zu beheben?

Code: (Doctype ist streng, aber nicht die Anzeige aus irgendeinem Grund)

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

InformationsquelleAutor Chau | 2011-02-07

Gibt es einen Grund für den überlauf überhaupt? Ich meine, eine Ext.Fenster sollten nicht wirklich Bildlaufleisten imho, änderte ich den code so entfernt er den scroll-Balken, und es sollte auch entfernen Sie das element, overflow-bug im 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();

Lassen Sie mich wissen, wenn dies nicht der Fall ist...

Es scheint nicht zu funktionieren - immer noch das gleiche optische problem. Aber drehen das problem um: Wie sollte ich das Fenster erstellen und die Inhalte, so kann ich eine container mit mehreren fieldset Elemente alle enthält mehrere Elemente, die Garantie, dass das Fenster zu klein ist, um zu zeigen Sie alle (das ist der Grund, warum ich wan ' T, das Fenster, um in der Lage sein, um zu scrollen)?
Warum willst du zu Garantie, dass es zu klein ist? Von einem usability-Sicht, die Bildlaufleiste ist böse. Wenn Sie möchten, um zu versuchen und zu beheben das visuelle Problem aber Sie können versuchen, hinzufügen von bodyStyle: 'overflow: hidden'

InformationsquelleAutor JamesHalsall

2

Ich denke Jaitsu schon das Haupt-Problem hier (die Verwendung von autoScroll: true), aber ich habe darauf hin einen anderen Fehler.

Warum sind Sie schriftlich zu initialConfig?
```
initComponent: function () {
    var config = {
        ...
    };
    Ext.apply(this, Ext.apply(this.initialConfig, config));
```
initialConfig sollte enthalten nur die config, wird an den Konstruktor der Komponente. Und es wird verwendet, wenn das Klonen der Komponente. Auch die docs sagen, es ist read-only. Wenn Sie nicht 100% sicher, dann tun Sie es nicht. Außerdem habe ich nicht sehen, warum würden Sie wollen, es zu tun. Ihre Komponente wird nur gut funktionieren, wenn Sie schreiben initComponent etwa so:
```
initComponent: function () {
    //you can set all the config options directly to this.
    this.items = [
        ...
    ];
    MyWindow.superclass.initComponent.call(this);
}
```
- Auch das ist eine alte habbit habe ich irgendwo aufgeschnappt :$ ich werde ändern Sie meine Wege - vielen Dank für die Erklärung 🙂
InformationsquelleAutor Rene Saarsoo

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.