---
title: "Toolbar in Sencha Touch"  
description: "In this article, I’m explaining the toolbar in sencha touch."  
author: "Sumit Kesarwani"  
published: 2013-06-22  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1352/toolbar-in-sencha-touch  
category: "sencha touch"  
tags: ["sencha touch"]  
reading_time: 5 minutes  

---

# Toolbar 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 toolbar in [sencha touch](https://www.mindstick.com/blog/619/changing-sencha-touch-app-theme).\

Toolbar is most commonly used docked [items](https://www.mindstick.com/articles/44359/store-your-valuable-items-in-a-mini-storage-unit) in the [container](https://www.mindstick.com/forum/34127/extjs-how-to-set-border-for-the-container) or panel. Toolbar can be docked either top or bottom through docked configuration.

##### ToolBar Example

Firstly drag-n-drop the container to hold the toolbar.

Next add a toolbar to the [project](https://yourviews.mindstick.com/story/1788/things-to-ensure-your-construction-project-is-successful).

```
Ext.define('MyApp.view.OuterContainer', {
    extend: 'Ext.Container',
 
    config: {
        layout: {
            pack: 'center',
            type: 'vbox'
        },
        items: [
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'My ToolBar'
            },
            {
                xtype: 'container',
                items: [
                    {
                        xtype: 'button',
                        itemId: 'mybutton',
                        margin: '10 10 0 10',
                        ui: 'confirm-round',
                        text: 'Toggle Docked'
                    },
                    {
                        xtype: 'button',
                        itemId: 'mybutton1',
                        margin: '10 10 0 10',
                        ui: 'action-round',
                        text: 'Toggle UI'
                    },
                    {
                        xtype: 'button',
                        itemId: 'mybutton2',
                        margin: '10 10 0 10',
                        ui: 'confirm-round',
                        text: 'Change Title'
                    }
                ]
            }
        ],
        listeners: [
            {
                fn: 'onToggleDockedTap',
                event: 'tap',
                delegate: '#mybutton'
            },
            {
                fn: 'onToggleUITap',
                event: 'tap',
                delegate: '#mybutton1'
            },
            {
                fn: 'onChangeTitleTap',
                event: 'tap',
                delegate: '#mybutton2'
            }
        ]
    },
 
    onToggleDockedTap: function(button, e, eOpts) {
        var toolbar = Ext.ComponentQuery.query('toolbar')[0],
            newDocked = (toolbar.getDocked() === 'top') ? 'bottom' : 'top';
 
        toolbar.setDocked(newDocked);
    },
 
    onToggleUITap: function(button, e, eOpts) {
        var toolbar = Ext.ComponentQuery.query('toolbar')[0],
            newUi = (toolbar.getUi() === 'light') ? 'dark' : 'light';
 
        toolbar.setUi(newUi);
 
    },
 
    onChangeTitleTap: function(button, e, eOpts) {
        var toolbar = Ext.ComponentQuery.query('toolbar')[0],
            titles = ['My Toolbar', 'Ext.Toolbar', 'Configurations are awesome!'],
            title = toolbar.getTitle().getTitle(),
            newTitle = titles[titles.indexOf(title) + 1] || titles[0];
 
        toolbar.setTitle(newTitle);
    }
});
```

Add one more container to the project to hold the buttons and add three buttons [Toggle](https://www.mindstick.com/forum/12682/jquery-toggle-if-statement) Docked, Toggle UI and Change Title, next add tap [events](https://www.mindstick.com/blog/102/events-in-c-sharp) to the buttons.

##### Output

![Toolbar in Sencha Touch](https://www.mindstick.com/mindstickarticle/372cafdc-56e9-4c0c-b2e2-a8804613a68f/images/94733f11-bc4b-46e9-a213-4e3a892573b8.png)

When you click/tap on the Toogle Docked button:

![Toolbar in Sencha Touch](https://www.mindstick.com/mindstickarticle/372cafdc-56e9-4c0c-b2e2-a8804613a68f/images/f99e29de-0238-4549-bd9e-c68823afe670.png)

To change ui [click](https://www.mindstick.com/articles/12423/social-login-magento-2-one-click-to-register-social)/tap on Toggle UI button:

![Toolbar in Sencha Touch](https://www.mindstick.com/mindstickarticle/372cafdc-56e9-4c0c-b2e2-a8804613a68f/images/75dd7381-3d2a-478f-b2e1-9c78ea858925.png)

And when you click/tap on the Change Title button the title will change:

![Toolbar in Sencha Touch](https://www.mindstick.com/mindstickarticle/372cafdc-56e9-4c0c-b2e2-a8804613a68f/images/c76bb889-ddfd-4aee-9ebe-dc0bdcd474b1.png)

---

Original Source: https://www.mindstick.com/articles/1352/toolbar-in-sencha-touch

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