ExtJS & Internet Explorer: повреждение макета с помощью полос прокрутки - PullRequest
Новая
       2

ExtJS & Internet Explorer: повреждение макета с помощью полос прокрутки

5 голосов
/ 11 марта 2011

У меня проблемы с Internet Explorer. У меня есть Window с одним Fieldset, содержащим несколько Components - все элементы ExtJS.

Размер окна можно изменить, и я хочу, чтобы полосы прокрутки появлялись, когда пользователь изменяет размер окна до размера, меньшего, чем размер, необходимый для отображения его содержимого.

Это прекрасно работает в FireFox 3.6.x, но при использовании IE7 или IE8 я получаю следующий результат:

Corrupted layout in Internet Explorer

Почему я получаю этот результат в Internet Explorer, и нельзя ли делать то, что я хочу?

Код, использованный для генерации вышеуказанного результата: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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, {         
        resizable: true,
        closable: true,
        width: 400,
        closeAction: 'hide',                        
        title: 'Window',
        autoScroll: true,
        layout: 'fit',

        initComponent: function () {

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

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

Я знаю, что этот вопрос очень похож на мой предыдущий вопрос , но я надеюсь, что в этот раз я буду более ясен в том, что я прошу. - И это относится как к IE7, так и к IE8.

Ответы [ 2 ]

1 голос
/ 31 марта 2011

Я обнаружил, что при предоставлении окна: 

bodyStyle: 'position:relative;'

FieldSet остается внутри окна.Зачем это нужно, я не знаю, ни как установить этот атрибут более Extjs'y .

Если у вас есть какие-либо комментарии, я приветствую их в надежде на просвет :)

1 голос
/ 11 марта 2011

Этот пример работает, оборачивая набор полей в панель и перемещая автопрокрутку из окна на панель: 

MyWindow = Ext.extend(Ext.Window, {         
        resizable: true,
        closable: true,
        width: 400,
        height: 200,
        closeAction: 'hide',                        
        title: 'Window',
        layout: 'fit',

        initComponent: function () {

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

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

Пара замечаний:

  • У меня былодать окну height для того, чтобы оно открывало что-либо при открытии
  • Ваш оригинальный пример хорошо работает в «режиме причуд», который можно получить, удалив объявление DOCTYPE вверхувашего файла.
...