TitleBar property

Hi everyone.

I'm trying to make a view Main.js with this code and I'm using some xtype like this to show in my tabs:

Ext.define("Gori.view.Main", {
extend: 'Ext.tab.Panel',
requires: ['Ext.TitleBar'],
xtype: 'mainpanel',
config: {
tabBarPosition: 'bottom',

items: [
{xtype:'tabhome'},
{xtype:'tabcourses'}
]
}
});

Here is the code of tabhome (Home.js)

Ext.define("Gori.view.Home", {
extend: 'Ext.tab.Panel',

requires: ['Ext.TitleBar'],
xtype:'tabhome',

config: {
title: 'Home',
iconCls: 'home',

styleHtmlContent: true,
scrollable: true,


html: [
"Test."
].join("")
}
});

But when I'm run, the titlebar doesn't appear.


Have another way to do this? To render differents tabs with "views" and show the respective titlebar?

Thanks.

If i change the code to this:

Ext.define("Gori.view.Home", {
extend: 'Ext.tab.Panel',
requires: ['Ext.TitleBar'],
xtype:'tabhome',

config: {
title: 'Home',
iconCls: 'home',

styleHtmlContent: true,
scrollable: true,

items: {
docked: 'top',
xtype: 'titlebar',
title: 'webAula Start'
},

html: [
"You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
"contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
"and refresh to change what's rendered here."
].join("")
}
});


This is the result :(

Attachment 33162