Home > DeveloperSection > Articles > Spacer in Sencha Touch

Spacer in Sencha Touch


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

Spacer in Sencha Touch

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


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

Follow MindStick