The VBox (short for vertical box) layout makes the position items vertically in the container. It can size items based on a fixed width.

Example 

Ext.define('MyApp.view.VBoxContainer', {

    extend: 'Ext.Container',

 

    config: {

        fullscreen: true,

        id: 'vboxContainer',

        layout: {

            align: 'start',

            type: 'vbox'

        },

        items: [

            {

                xtype: 'titlebar',

                docked: 'top',

                title: 'VBox Layout'

            },

            {

                xtype: 'toolbar',

                docked: 'top',

                items: [

                    {

                        xtype: 'container',

                        html: 'Pack:',

                        style: 'color: #fff; padding: 0 10px; width: 85px;'

                    },

                    {

                        xtype: 'segmentedbutton',

                        items: [

                            {

                                xtype: 'button',

                                pressed: true,

                                itemId: 'mybutton3',

                                text: 'Start'

                            },

                            {

                                xtype: 'button',

                                itemId: 'mybutton4',

                                text: 'Center'

                            },

                            {

                                xtype: 'button',

                                itemId: 'mybutton5',

                                text: 'End'

                            }

                        ]

                    }

                ]

            },

            {

                xtype: 'toolbar',

                docked: 'top',

                items: [

                    {

                        xtype: 'container',

                        html: 'Align:',

                        style: 'color: #fff; padding: 0 10px; width: 85px;'

                    },

                    {

                        xtype: 'segmentedbutton',

                        items: [

                            {

                                xtype: 'button',

                                pressed: true,

                                itemId: 'mybutton6',

                                text: 'Start'

                            },

                            {

                                xtype: 'button',

                                itemId: 'mybutton7',

                                text: 'Center'

                            },

                            { 
                                xtype: 'button', 
                                itemId: 'mybutton8', 
                                text: 'End' 
                            }, 
                            { 
                                xtype: 'button', 
                                itemId: 'mybutton9', 
                                text: 'Stretch' 
                            } 
                        ] 
                    } 
                ] 
            }, 
            { 
                xtype: 'button', 
                margin: 2, 
                text: 'Btn 1' 
            }, 
            { 
                xtype: 'button', 
                margin: 2, 
                text: 'Btn 2' 
            }, 
            { 
                xtype: 'button', 
                margin: 2, 
                text: 'Btn 3' 
            } 
        ], 
        listeners: [ 
            { 
                fn: 'onStartPackTap', 
                event: 'tap', 
                delegate: '#mybutton3' 
            }, 
            { 
                fn: 'onCenterPackTap', 
                event: 'tap', 
                delegate: '#mybutton4' 
            }, 
            { 
                fn: 'onEndPackTap', 
                event: 'tap', 
                delegate: '#mybutton5' 
            }, 
            { 
                fn: 'onStartAlignTap', 
                event: 'tap', 
                delegate: '#mybutton6' 
            }, 
            { 
                fn: 'onCenterAlignTap', 
                event: 'tap', 
                delegate: '#mybutton7' 
            }, 
            { 
                fn: 'onEndAlignTap', 
                event: 'tap', 
                delegate: '#mybutton8' 
            }, 
            { 
                fn: 'onStretchAlignTap', 
                event: 'tap', 
                delegate: '#mybutton9' 
            } 
        ] 
    }, 
  
    onStartPackTap: function(button, e, eOpts) { 
        this.getLayout().setPack('start'); 
    }, 
  
    onCenterPackTap: function(button, e, eOpts) { 
        this.getLayout().setPack('center'); 
    }, 
  
    onEndPackTap: function(button, e, eOpts) { 
        this.getLayout().setPack('end'); 
    }, 
  
    onStartAlignTap: function(button, e, eOpts) { 
        this.getLayout().setAlign('start'); 
    }, 
  
    onCenterAlignTap: function(button, e, eOpts) { 
        this.getLayout().setAlign('center'); 
    }, 
  
    onEndAlignTap: function(button, e, eOpts) { 
        this.getLayout().setAlign('end'); 
    }, 
  
    onStretchAlignTap: function(button, e, eOpts) { 
        this.getLayout().setAlign('stretch'); 
    } 
});