Home > DeveloperSection > Articles > Toolbar in Sencha Touch

Toolbar in Sencha Touch


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

Toolbar in Sencha Touch

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

 


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

Follow MindStick