autoscroll does not work with vbox layout

Question

I need align the formpanels to the center, so I used the vbox layout, and after I used it the autoscroll did not work as before, the code is as below:

 Usr.VWPanel = Ext.extend(Ext.Panel, {
        id: null,
        rid: null,
        closable: true,
        autoScroll: true,
        buttonAlign: 'center',
        layout: {
                type:'vbox',
                padding:'5',
                pack:'center',
                align:'center'
        },
        initComponent: function () {
            Ext.apply(this, {
                items: [
                {
                    xtype: 'spacer',
                    height: 16
                },
                {
                    xtype: 'usr.usrform',
                    itemId: 'usr.vwpain.usrformt',
                    width: 600,
                    height: 500
                },
                {
                    xtype:'spacer',
                    height: 16
                },
                {
                    xtype: 'usr.loginform',
                    itemId: 'usr.vwpain.loginform',
                    width: 600
                },
                {
                    xtype: 'spacer',
                    height: 16
                },
                {
                    xtype: 'usr.subsform',
                    itemId: 'usr.vwpain.subsform',
                    width: 600
                }],
...

plz advise.

Answer 1

the vbox layout will never show the scroller.

{
    xtype: 'window',
    title: 'My Window',
    width: 500,
    height: 500,
    layout: 'vbox',
    layoutConfig: {
        pack: 'center',
        align: 'center'
    },
    items: [
        {
            xtype: 'panel',
            title: 'My Panel',
            anchor: '80% 100%',
            height: 300,
            width: 300,
            autoScroll: true,
            items: [
                {
                    xtype: 'panel',
                    html: 'this isform1',
                    height: 100
                },
                {
                    xtype: 'panel',
                    html: 'this isform1',
                    height: 100
                },
                {
                    xtype: 'panel',
                    html: 'this isform1',
                    height: 100
                }
            ]
        }
    ]
}

Answer 2

in your css you can set your My Panel margins to {0 auto} which will center the My Panel inside the window. This means you don't need a special layout config for your window.

Answer 3

I have added a listener on resize event to get the vertical scroll as for Vbox we have to provide height to get scroll but when window size get change scroller height remain constant.

Ext.define('DataConfigurations', {
extend: 'Ext.form.Panel',
bodyStyle: 'padding:5px 5px;',
listeners: {
resize: {
    fn: function(el) {
        this.setHeight(this.up('window').getHeight()-150);  // 150  is extra for my panel coz of headers so have minus it.
        console.log("new height = " +   this.up('window').getHeight()-150);
    }
}
},
title: "Update Data Configurations",

Hopes this help.