Home > DeveloperSection > Articles > VBox Layout in Sencha Touch

VBox Layout in Sencha Touch


Sencha Touch Sencha Touch 
Ratings:
1 Comment(s)
 3865  View(s)
Rate this:

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


Nice article

By Johnny Depp on   3 years ago
Nice article for beginners

Don't want to miss updates? Please click the below button!

Follow MindStick