1

我想知道 manageOverflow 是否适用于具有边框布局的视口。我的应用程序有一个视口（边框布局）和 4 个容器（2 个北、1 个东和 1 个西）。其中一个容器（东边的那个）是我的主容器，带有布局填充。当我“更改我的页面”时，我会用我的页面容器动态填充这个主容器。

我的问题是：当我放置一个比我的innerHeight（屏幕尺寸）长的网格容器时，会出现一个垂直滚动条，这很好，但也是一个水平滚动条。视口不会使用新大小（没有滚动条的大小）自动重新布局。

manageOverflow 似乎是答案，但是当我将此属性添加到我的布局时，它与属性 reserveScrollbar 的结果相同。

有人已经试过了吗？

编辑：一些测试代码：`

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>test</title>


    <script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js" type="text/javascript"></script>
    <script>
        Ext.application({

            name: 'test',
            launch: function() {

                Ext.create('Ext.container.Viewport', {
                    layout: {
                        type: 'border',
                        manageOverflow: 1
                    },

                    autoScroll:true,

                    items : [{
                        xtype: 'container',
                        region: 'north',
                        height: 150,
                        border: 5,
                        style: {
                            borderColor: 'black',
                            borderStyle: 'solid'
                        }
                    }, {
                        xtype: 'container',
                        region: 'west',
                        width: 150,
                        border: 5,
                        style: {
                            borderColor: 'green',
                            borderStyle: 'solid'
                        }
                    }, {
                        xtype: 'container',
                        region: 'north',
                        height: 150,
                        border: 5,
                        style: {
                            borderColor: 'red',
                            borderStyle: 'solid'
                        }                       
                    }, {
                        xtype : 'container',
                        region : 'center',
                        border: 5,
                        style: {
                            borderColor: 'blue',
                            borderStyle: 'solid'
                        }                       
                    }],
                    renderTo: Ext.getBody()
                });
            }
        });
    </script>
</head>

<body></body>

`

4

0 回答 0