VBox Layout in Sencha Touch

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

Leave Comment