How to add Space between items in Sencha Touch 2

Ext.Spacer component is generally used to put space between items in Ext.Toolbar components. By Default, it uses flex configuration option as 1.

Let me demonstrate applying space between buttons on ToolBar Component in Various Ways.

Ext.create('Ext.Container', {

    fullscreen: true,

    items: [
        {
            xtype : 'toolbar',
            docked: 'top',
            items: [
                {
                    xtype: 'button',
                    text : 'Home'
                },
                {
                    xtype: 'spacer'
                },
                {
                    xtype: 'button',
                    text : 'Logout'
                }
            ]
        }
    ]
});

You can also set the width of the spacer using width configuration. If this is set, the value of flex will be ignored.

Ext.create('Ext.Container', {
    fullscreen: true,

    items: [
        {
            xtype : 'toolbar',
            docked: 'top',
            items: [
                {
                    xtype: 'button',
                    text : 'Home'
                },
                {
                    xtype: 'spacer'
                },
                {
                    xtype: 'button',
                    text : 'About Us'
                },
                {
                    xtype: 'spacer',
                     width: 100
                },
                {
                    xtype: 'button',
                    text : 'Logout'
                }
            ]
        }
    ]
});

Hope, you enjoyed this Post.