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
Leave Comment