articles

Home / DeveloperSection / Articles / TitleBar in Sencha Touch

TitleBar in Sencha Touch

Sumit Kesarwani 6421 22-Jun-2013

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


Updated 07-Sep-2019

Leave Comment

Comments

Liked By