Question

我创建了一个“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>

问题是，在调整浏览器页面大小时，不会出现水平滚动条，并且不会调整gridview的大小，因此不会显示gridview右侧的数据。

我该如何解决这个问题？

Answer 1

ExtJs库有EventManager类。班级负责注册各种活动。该类有方法“onWindowResize”，当浏览器调整大小时会出现问题。所以你需要订阅这个活动。 See link for example

调整浏览器窗口大小时，ExtJs网格不会调整大小。

1 个答案: