EXTJS Viewport滚动条

[processhjc]

Viewport充满整个屏幕，但是我做的页面超过屏幕，想弄个滚动条。但是autoscroll：true还是不行。
说明：我Viewport的layout为hbox里面有三个panel，就是中间的panel高度超过页面高度了，想弄个滚动条。
有没有高人帮忙解答一下？
谢谢

[Mr小刺猬]

viewport不会超过你整个屏幕的 因为它是最底层的容器，会随着浏览器大小而自动变化。
你如果想设置滚动条，那就对中间的Panel设置好了。
而且Viewport的layout设置为Border试试，中间的region为center 甚至autoscroll为true.

总之，你在viewport哪里设置autoscroll是木有用滴

给你个例子吧

Ext.define('MyApp.view.ui.MyViewport', {
    extend: 'Ext.container.Viewport',

    layout: {
        type: 'border'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    id: 'PanelMidlle',
                    autoScroll: true,
                    title: 'PanelMiddle',
                    region: 'center',
                    items: [
                        {
                            xtype: 'panel',
                            height: 306,
                            id: 'PanelInsideMiddle',
                            width: 569,
                            title: 'PanelInsideMiddle'
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    height: 150,
                    id: 'PanelNorth',
                    title: 'PanelNorth',
                    region: 'north'
                },
                {
                    xtype: 'panel',
                    height: 150,
                    id: 'PanelSouth',
                    title: 'PanelSouth',
                    region: 'south'
                }
            ]
        });

        me.callParent(arguments);
    }
});

[chenlin]

老生常谈的问题 - -

panel用 layout='fit' 搞定。

[processhjc]

谢谢你的回答，可不可以帮忙看下我测试的简单示例为什么还是没出现滚动条呢？

Ext.define('MyApp.view.ui.MyViewport', {
    extend: 'Ext.container.Viewport',

    layout: {
        type: 'border'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    autoScroll: true,
                    layout: {
                        align: 'stretch',
                        type: 'vbox'
                    },
                    title: '',
                    flex: 4,
                    region: 'center',
                    items: [
                        {
                            xtype: 'panel',
                            height: 700,
                            title: '上'
                        },
                        {
                            xtype: 'panel',
                            height: 800,
                            title: '下',
                            flex: 1
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    width: 150,
                    title: '',
                    flex: 1,
                    region: 'west'
                },
                {
                    xtype: 'panel',
                    width: 150,
                    title: '',
                    flex: 1,
                    region: 'east'
                }
            ]
        });

        me.callParent(arguments);
    }
});

[Quote=引用 1 楼 wh1100717 的回复:]
viewport不会超过你整个屏幕的 因为它是最底层的容器，会随着浏览器大小而自动变化。
你如果想设置滚动条，那就对中间的Panel设置好了。
而且Viewport的layout设置为Border试试，中间的region为center 甚至autoscroll为true.

总之，你在viewport哪里设置autoscroll是木有用滴

给你个例子吧

JScript code……
[/Quote]

[processhjc]

已经自己解决。其实就是要滚动的panel的layout设置成auto就可以了。不能设置成hbox、border之类的。
我是把要滚动的panel（项目需要设置成hbox）外面嵌套一个layout：auto的panel，就可以了。
谢谢各位