ExtJS & IE7: рендеринг проблем с простым окном - PullRequest
Новая
       18

ExtJS & IE7: рендеринг проблем с простым окном

1 голос
/ 07 февраля 2011

Я создал это очень простое расширение окна . В 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>

Ответы [ 2 ]

2 голосов
/ 10 февраля 2011

Я думаю, что 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);
}
2 голосов
/ 10 февраля 2011

Есть ли какая-либо причина для переполнения?Я имею в виду, что 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();

Дайте мне знатьесли это не так ...

...