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.

Found this on the Sencha forums: http://www.sencha.com/forum/archive/index.php/t-108868.html Since VBox doesn't support autoScroll:true the suggestion is that you use anchor. Not sure how you would accomplish that centering though... — Hemlock, Dec 28 '10 at 20:19

atian25 · Answer 1 · 2010-12-30T12:59:31.740

the vbox layout will never show the scroller.

alt text

{
    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
                }
            ]
        }
    ]
}

so is there an alternative to align the panels in the center? — mothee, Dec 30 '10 at 00:57
try to put forms into a autoscroll panel, then put it into another panel with center layout or vbox (http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html -->Custorm Layout->Center) — atian25, Dec 30 '10 at 12:32

score 1 · Answer 2 · edited Nov 09 '12 at 14:23

1

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.

edited Nov 09 '12 at 14:23

J.A.I.L.

10,644
4
37
50

answered Oct 13 '11 at 21:03

Scott

11
1

score 0 · Answer 3 · answered May 03 '16 at 15:21

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.

autoscroll does not work with vbox layout

3 Answers3

Linked