In this article, I’m explaining the vbox layout in sencha touch.

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');
    }
});
Output 

VBox Layout in Sencha Touch

When you clicks/tap on center button in both pack and align section:

VBox Layout in Sencha Touch

When you clicks/tap on center button in pack section and end button in align section:

VBox Layout in Sencha Touch

When you clicks/tap on center button in pack section and stretch button in align section:

 

VBox Layout in Sencha Touch

  Modified On Nov-29-2017 07:47:24 PM

Leave Comment