---
title: "Spacer in Sencha Touch"  
description: "In this article, I’m explaining the spacer in sencha touch and how to use it."  
author: "Sumit Kesarwani"  
published: 2013-06-21  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1347/spacer-in-sencha-touch  
category: "sencha touch"  
tags: ["sencha touch"]  
reading_time: 3 minutes  

---

# Spacer in Sencha Touch

In this [article](https://yourviews.mindstick.com/view/81489/kashmir-now-after-an-year-of-abrogation-of-article-370), I’m explaining the spacer in [sencha touch](https://www.mindstick.com/blog/619/changing-sencha-touch-app-theme) and how to use it.\

Spacer [component](https://www.mindstick.com/articles/12262/learn-how-to-make-a-component-in-magento-2) is generally used to put [space](https://yourviews.mindstick.com/view/87102/when-peoples-will-really-start-living-on-the-moon-explore-the-space) between [items](https://www.mindstick.com/articles/44359/store-your-valuable-items-in-a-mini-storage-unit) in toolbar or [titlebar](https://www.mindstick.com/forum/1013/how-to-change-font-color-and-size-of-titlebar-in-sencha-touch) component.

##### Example

Firstly drag-n-drop a [container](https://www.mindstick.com/forum/34127/extjs-how-to-set-border-for-the-container) and named it SpacerContainer add a toolbar to the container.Next [add two](https://www.mindstick.com/forum/480/add-two-number) buttons and a spacer to the toolbar. We use one more container to hold the ChangeSpacerWidth [button](https://www.mindstick.com/articles/63/how-to-add-button-in-datagridview-in-csharp-dot-net) and add a tap [event](https://www.mindstick.com/articles/167719/marquee-hire-benefits-of-event-lighting-hire-london) 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](https://www.mindstick.com/mindstickarticle/43315409-f05e-4f47-af83-f707b2cf9a4d/images/341e3fc0-ca88-42b1-8316-d0e37aae4a1c.png)

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

![Spacer in Sencha Touch](https://www.mindstick.com/mindstickarticle/43315409-f05e-4f47-af83-f707b2cf9a4d/images/0e49e595-f282-4af8-b699-6b0868cb27f4.png)

---

Original Source: https://www.mindstick.com/articles/1347/spacer-in-sencha-touch

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.