Home > DeveloperSection > Articles > Hbox Layout in Sencha Touch

Hbox Layout in Sencha Touch


Sencha Touch Sencha Touch 
Ratings:
0 Comment(s)
 2287  View(s)
Rate this:

Hbox Layout in Sencha Touch

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

The HBox ( short for horizontal box ) layout makes the position items horizontally in the container. It can size items based on a fixed width.

Example

 

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

    extend: 'Ext.Container',

 

    config: {

        fullscreen: true,

        id: 'hboxContainer',

        layout: {

            align: 'start',

            type: 'hbox'

        },

        items: [

            {

                xtype: 'titlebar',

                docked: 'top',

                title: 'HBox Layout'

            },

            {

                xtype: 'toolbar',

                docked: 'top',

                items: [

                    {

                        xtype: 'container',

                        html: 'Pack: ',

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

                    },

                    {

                        xtype: 'segmentedbutton',

                        ui: '',

                        items: [

                            {

                                xtype: 'button',

                                pressed: true,

                                itemId: 'mybutton',

                                text: 'Start'

                            },

                            {

                                xtype: 'button',

                                itemId: 'mybutton1',

                                text: 'Center'

                            },

                            {

                                xtype: 'button',

                                itemId: 'mybutton2',

                                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: 'mybutton3',

                                text: 'Start'

                            },

                            {

                                xtype: 'button',

                                itemId: 'mybutton4',

                                text: 'Center'

                            },

                            {

                                xtype: 'button',

                                itemId: 'mybutton5',

                                text: 'End'

                            },

                            {

                                xtype: 'button',

                                itemId: 'mybutton6',

                                text: 'Stretch'

                            }

                        ]

                    }

                ]

            },

            {

                xtype: 'button',

                margin: 2,

                text: 'btn 1'

            },

            {

                xtype: 'button',

                margin: 2,

                text: 'btn 2'

            },

            {

                xtype: 'button',

                margin: 3,

                text: 'btn 3'

            }

        ],

        listeners: [

            {

                fn: 'onStartPackTap',

                event: 'tap',

                delegate: '#mybutton'

            },

            {

                fn: 'onCenterPackTap',

                event: 'tap',

                delegate: '#mybutton1'

            },

            {

                fn: 'onEndPackTap',

                event: 'tap',

                delegate: '#mybutton2'

            },

            {

                fn: 'onStartAlignTap',

                event: 'tap',

                delegate: '#mybutton3'

            },

            {

                fn: 'onCenterAlignTap',

                event: 'tap',

                delegate: '#mybutton4'

            },

            {

                fn: 'onEndAlignTap',

                event: 'tap',

                delegate: '#mybutton5'

            },

            {

                fn: 'onStretchAlignTap',

                event: 'tap',

                delegate: '#mybutton6'

            }

        ]

    },

 

    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

Hbox Layout in Sencha Touch

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

Hbox Layout in Sencha Touch

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

Hbox Layout in Sencha Touch

Stretch button in align section will stretch the button like this:

Hbox Layout in Sencha Touch


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

Follow MindStick