articles

Home / DeveloperSection / Articles / Toolbar in Sencha Touch

Toolbar in Sencha Touch

Sumit Kesarwani 5120 22-Jun-2013

In this article, I’m explaining the toolbar in sencha touch.

Toolbar is most commonly used docked items in 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.

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 Docked, Toggle UI and Change Title, next add tap events to the buttons.

Output 

Toolbar in Sencha Touch

When you click/tap on the Toogle Docked button:

Toolbar in Sencha Touch

To change ui click/tap on Toggle UI button:

Toolbar in Sencha Touch

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

Toolbar in Sencha Touch

 


Updated 07-Sep-2019

Leave Comment

Comments

Liked By