Adding a Title Bar

[craigeves]

Hi

I'm new to Sencha and am trying to add a title bar to the top of my screen but can't for the life of me work out how to do it...

I just need it to say something like 'Recipe Finder' on the home screen and something else on each card, depending on the contents of the card.

I'd also like to know how to make the tabbar at the top normal size. At the moment it's oversized!

Can anyone help? This is what I have so far...



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {


var vanilla = new Ext.Panel({
title: 'Vanilla', //panel's title
fullscreen: true,
html: 'Vanilla'
});


var chocolate = new Ext.Panel({
title: 'Chocolate', //panel's title
fullscreen: true,
html: 'Chocolate'
});



// Create a Tab Panel
var vanillapanel = new Ext.TabPanel({
tabBar: {
dock: 'top',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'dark',
cardSwitchAnimation: {
type: 'fade',
cover: true
},

defaults: {
scroll: 'vertical'
},
items: [vanilla, chocolate]




});



// Create a Carousel of Items
var carousel1 = new Ext.Carousel({
title: 'Photo Inspiration',
iconCls: 'favorites',
defaults: {
cls: 'card'
},
items: [{
title: 'Tab 1',
html: '<h1>Carousel 1</h1>'
},
{
title: 'Tab 2',
html: '<h1>Carousel 2</h1>'
},
{
title: 'Tab 3',
html: '<h1>Carousel 3</h1>'
}]
});



// Create a Tab Panel
var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'dark',
cardSwitchAnimation: {
type: 'fade',
cover: true
},

defaults: {
scroll: 'vertical'
},
items: [ {
title: 'Home',
html: '<h1>Home</h1>',
cls: 'home',
iconCls: 'download'
},{
title: 'Recipes',
html: '<h1>Recipes</h1>',
iconCls: 'favorites',
cls: 'recipes',
}, carousel1, vanillapanel]




});








}






});

[craigeves]

I have worked out how to add the toolbar on my own :)

but still stuck on how to get the tab bar that is docked to the top to display the correct size.

What am i doing wrong?


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {


var vanilla = new Ext.Panel({
title: 'Vanilla', //panel's title
fullscreen: true,
html: 'Vanilla'
});


var chocolate = new Ext.Panel({
title: 'Chocolate', //panel's title
fullscreen: true,
html: 'Chocolate'
});

var chocolate = new Ext.Panel({
title: 'Chocolate', //panel's title
fullscreen: true,
html: 'Chocolate'
});



// Create a Toolbar
var myToolbar = new Ext.Toolbar({
dock : 'top',
title: 'My Toolbar',
items: [
{
text: 'My Button'
}
]
});

var myPanel = new Ext.Panel({
dockedItems: [myToolbar],
fullscreen : true,
html : 'Test Panel'
});





// Create a Tab Panel
var vanillapanel = new Ext.TabPanel({
tabBar: {
dock: 'top',
defaults: {flex: 1},
},
fullscreen: true,
ui: 'dark',
cardSwitchAnimation: {
type: 'fade',
cover: true
},

defaults: {
scroll: 'vertical'
},
items: [vanilla, chocolate]




});



// Create a Carousel of Items
var carousel1 = new Ext.Carousel({
title: 'Photo Inspiration',
iconCls: 'favorites',
defaults: {
cls: 'card'
},
items: [{
title: 'Tab 1',
html: '<h1>Carousel 1</h1>'
},
{
title: 'Tab 2',
html: '<h1>Carousel 2</h1>'
},
{
title: 'Tab 3',
html: '<h1>Carousel 3</h1>'
}]
});



// Create a Tab Panel
var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'dark',
cardSwitchAnimation: {
type: 'fade',
cover: true
},

defaults: {
scroll: 'vertical'
},
items: [ {
title: 'Home',
html: '<h1>Home</h1>',
cls: 'home',
iconCls: 'download'
},{
title: 'Recipes',
html: '<h1>Recipes</h1>',
iconCls: 'favorites',
cls: 'recipes',
}, carousel1, vanillapanel]




});








}







});







Thanks in advance... :)