articles

Home / DeveloperSection / Articles / Spacer in Sencha Touch

Spacer in Sencha Touch

Sumit Kesarwani 6257 21-Jun-2013

In this article, I’m explaining the spacer in sencha touch and how to use it.

Spacer component is generally used to put space between items in toolbar or titlebar component.

Example

Firstly drag-n-drop a container and named it SpacerContainer add a toolbar to the container.Next add two buttons and a spacer to the toolbar. We use one more container to hold the ChangeSpacerWidth button and add a tap event to the ChangeSpacerWidth button.

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

    extend: 'Ext.Container',
 
    config: {
        items: [
            {
                xtype: 'toolbar',
                docked: 'top',
                items: [
                    {
                        xtype: 'button',
                        text: 'Button1'
                    },
                    {
                        xtype: 'spacer',
                        width: 50
                    },
                    {
                        xtype: 'button',
                        text: 'Button2'
                    }
                ]
            },
            {
                xtype: 'container',
                height: 152,
                items: [
                    {
                        xtype: 'button',
                        docked: 'bottom',
                        itemId: 'mybutton2',
                        text: 'Change Spacer Width'
                    }
                ]
            }
        ],
        listeners: [
            {
                fn: 'onChangeSpacerWidthTap',
                event: 'tap',
                delegate: '#mybutton2'
            }
        ]
    },
 
    onChangeSpacerWidthTap: function(button, e, eOpts) {
        var spacer = Ext.ComponentQuery.query('spacer')[0],
            from = 10,
            to = 450;
 
        spacer.setWidth(Math.floor(Math.random() * (to - from + 1) + from));
    }
});

 Tap event of the ChangeSpacerWidth button set the width dynamically based on Math.floor and Math.random functions.

Output

Spacer in Sencha Touch

When you click/tap the Change Spacer Width button, the width of the spacer will change randomly like this:

Spacer in Sencha Touch


Updated 07-Sep-2019

Leave Comment

Comments

Liked By