Sencha Touch: avoiding blank line while combining Carousel and Toolbar - sencha-touch-2

Question

I'm having an issue while scrolling between items in the vertical carousel:
The blank division has the same height as the toolbar. Is there any way to avoid the blank line? This is my current code:
Ext.define('eltirabuzon.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video',
'Ext.carousel.Carousel'
],
config: {
cls: 'cards',
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
}
}
});
Ext.create('Ext.Carousel',{
fullscreen: true,
height: '100%',
direction: 'vertical',
directionLock: true,
indicator: false,
defaults: {
directionLock: true,
styleHtmlContent: true,
margin: 0,
padding: 0
},
items: [
{
xtype: 'toolbar',
dock: 'top',
ui: 'dark',
title: 'El Tirabuzon',
items: [{
xtype: 'button',
text: '',
docked: 'left',
ui: 'action',
cls: 'button-options'
}]
},
{
html: 'rtutorial',
style: {
'color': '#FFF',
'background-color': '#BBB',
'background-image': 'url(http://gastonbercun.com/wp-content/uploads/2011/08/steve-jobsNews.jpg)',
'background-size': 'cover'
}
},
{
html: 'noticia',
style: {
'color': '#FFF',
'background-color': '#BBB',
'background-image': 'url(http://blog.ciencianueva.com/wp-content/uploads/2011/10/steve-jobs-renuncia-a-apple.jpeg)',
'background-size': 'cover'
}
},
{
html: 'lista',
style: {
'color': '#FFF',
'background-color': '#BBB',
'background-image': 'url(http://www.biography.com/imported/images/Biography/Images/Galleries/Steve%20Jobs/steve-jobs-photo-NeXT-intro-07-sized.jpg)',
'background-size': 'cover'
}
},
{
html: 'resena',
style: {
'color': '#FFF',
'background-color': '#CCC',
'background-image': 'url(http://3.bp.blogspot.com/-HRJITwGr_Vk/TlYaxYFxoKI/AAAAAAAAAPI/3ofib-Z1VgI/s1600/ipadjobsjpg-1426c786c4434809.jpg)',
'background-size': 'cover'
}
}
]
});