Сетка ExtJs не изменяется при изменении размера окна браузера. - PullRequest
Новая
       4

Сетка ExtJs не изменяется при изменении размера окна браузера.

0 голосов
/ 11 июля 2011

Я создал страницу «html», которая содержит следующий код: 

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>test Example</title>
        <link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css" />
        <script type="text/javascript" src="http://dev.sencha.com/deploy/ext-4.0.2a/bootstrap.js"></script>
    </head>

    <body>
        <script type="text/javascript">
            Ext.require(['*']);

            Ext.onReady(function() {


                Ext.create('Ext.Viewport', {
                    layout: {
                        type: 'border'
                    },
                    items: [{
                        region: 'center',
                        layout: 'border',
                        border: false,
                        items: [{
                            region: 'center',
                            title: 'Center',
                            contentEl: 'DivMain'
                        }]
                    }]
                });

                var myData = [
                    ['3m Co', 71.72, 0.02, 0.03],
                    ['Alcoa Inc', 29.01, 0.42, 1.47],
                    ['Altria Group Inc', 83.81, 0.28],
                    ['AT&T Inc.', 31.61, -0.48, -1.54, ],
                    ['Boeing Co.', 75.43, 0.53, 0.71, ]
                ];

                var store = Ext.create('Ext.data.ArrayStore', {
                    fields: [{
                        name: 'company'
                    }, {
                        name: 'price',
                        type: 'float'
                    }, {
                        name: 'change',
                        type: 'float'
                    }, {
                        name: 'pctChange',
                        type: 'float'
                    }

                    ],
                    data: myData
                });
                var grid = Ext.create('Ext.grid.Panel', {
                    store: store,
                    columns: [{
                        text: 'Company',
                        flex: 1,
                        dataIndex: 'company'
                    }, {
                        text: 'Price',
                        flex: 1,
                        dataIndex: 'price'
                    }, {
                        text: 'Change',
                        flex: 1,
                        dataIndex: 'change'
                    }, {
                        text: '% Change',
                        flex: 1,
                        dataIndex: 'pctChange'
                    }],
                    height: 250,
                    width: '100%',
                    title: 'Array Grid',
                    renderTo: 'grid-example',
                    viewConfig: {
                        stripeRows: true
                    }
                });

            });
        </script>
        <div id="DivMain">
            <div id="grid-example"></div>
        </div>
    </body>

</html>

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

Как решить эту проблему?

1 Ответ

0 голосов
/ 20 ноября 2011

Библиотека ExtJs имеет класс EventManager. Класс отвечает за регистрацию различных событий. Класс имеет метод "onWindowResize", который срабатывает при изменении размера браузера. Так что вам нужно подписаться на это событие. См. Ссылку для примера

...