Home > DeveloperSection > Articles > TitleBar in Sencha Touch

TitleBar in Sencha Touch


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

TitleBar in Sencha Touch

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

Titlebar is most commonly used as docked item in container or panel. It can be docked to top or bottom.

The main difference between titleBar and toolbar is that the title configuration is always centered horizontally in a titleBar between any items aligned left or right.

Titlebar Example:-

First drag-n-drop the container to hold the titlebar and add the title to the project.

Ext.define('MyApp.view.MyContainer', {

    extend: 'Ext.Container',

 

    config: {

        html: 'TitleBar with Aqua Color, Size : 20px and Italic Format',

        styleHtmlContent: true,

        items: [

            {

                xtype: 'titlebar',

                docked: 'top',

                height: 55,

                id: 'TitleBar',

                itemId: 'mytitlebar',

                title: 'Navigation',

                layout: {

                    align: 'start',

                    type: 'hbox'

                },

                items: [

                    {

                        xtype: 'button',

                        itemId: 'mybutton',

                        iconCls: 'user',

                        text: ''

                    }

                ],

                listeners: [

                    {

                        fn: function(element, eOpts) {

                            Ext.getCmp(element.id).titleComponent.innerElement.dom.style.color = 'aqua';

                            Ext.getCmp(element.id).titleComponent.innerElement.dom.style.fontSize = '20px';

                            Ext.getCmp(element.id).titleComponent.innerElement.dom.style.fontStyle = 'italic';

                        },

                        event: 'painted'

                    }

                ]

            }

        ]

    }

});

 

You can also add a button to the titlebar, just simply drag-n-drop the button onto the titlebar. Add a paint event to the titlebar and write the above code in it.

Output

TitleBar in Sencha Touch


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

Follow MindStick