articles

Home / DeveloperSection / Articles / Hbox Layout in Sencha Touch

Hbox Layout in Sencha Touch

Sumit Kesarwani 4589 15-Jun-2013

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


Updated 07-Sep-2019

Leave Comment

Comments

Liked By