Hello: I'm new to Sencha, and have begun building an app which uses a view port extended from TabPanel. In one of the 'panels', i'm using a custom xtype which is simply a custom view based on Panel. For some reaosn, any item I add to the view is getting vertically stretched from top to bottom; even a fixed height (which shouldn't be necessary) is being ignmored. I have the layout set to 'card' for the Panel itself, and have gotten the same result with buttons and toolbars. Here is my code on the custom viewport:

xyz.Viewport = Ext.extend(Ext.TabPanel, {
id: 'viewport',
fullscreen: true,
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [{
title: 'Home',
html: '1',
id: 'tab1',
iconCls: 'home'
}, {
title: 'Ranking',
xtype: 'rankingsList',
layout:'card',
iconCls: 'user'

}, {
title: 'Search',
html: 'Search View here',
cls: 'card3',
iconCls: 'search'
}, {
title: 'Post',
html: 'Posts',
cls: 'card3',
iconCls: 'user'
},
{
title: 'More',
html: 'More stuff here',
cls: 'card3',
iconCls: 'more'
}],


initComponent: function () {
Ext.apply(this, {
dockedItems: [
{
dock: 'top',
id: 'toolbarThing',
xtype: 'toolbar',
title: 'My Toolbar',
width: 250
}
]
});

xyz.Viewport.superclass.initComponent.apply(this, arguments);
}
});
...and now the view itself:

xyz.views.Ranking = new Ext.extend(Ext.Panel, {
fullscreen:true,
layout: 'card',
listeners: {
element: 'body',
click: function () {
//lert('hello');
}
},
items: [
{ xtype: 'button',
dock: 'bottom',
text:'sort',
ui: 'rounded',

handler:function () {
alert("clicked the button");
}
},
{ xtype: 'button',
dock: 'top',
text: 'another',
ui: 'rounded',

handler: function () {
alert("clicked the button");
}
}

],
initComponent: function () {
//initComponent begin
xyz.views.Ranking.superclass.initComponent.apply(this, arguments);
//initComponent end
}


}
);

Ext.reg('rankingsList', xyz.views.Ranking);

Any help on why this may be occuring would be very welcome..thanks!