Unable to add Docked Panel

[gcallaghan]

In the following Code the card layout component is given an inline style of width:0 and height:0.
as a result I am unable to see the component with the card layout. Is there any way to override this? or rather set a variable width



AdvertisementComponent = Ext.extend(Ext.Panel,{
layout:'card',
cls:'advertisements',
activeItem:0,
items:[
{html:'<img src="'+ MEDIA_URL +'img/logo.png" />'},
],
minWidth:280,
maxWidth:920
});
HeaderBar = Ext.extend(Ext.Panel,{
layout:'hbox',
dock:'top',
cls:'header',
height:44,
initComponent:function(){
HeaderBar.superclass.initComponent.call(this);
this.add(new AdvertisementComponent());
this.doComponentLayout();
},
});
Viewport = Ext.extend(Ext.Panel,{
fullscreen:true,
layout:'vbox'
});
Ext.setup({
tabletStartupScreen: 'img/tablet_startup.png',
icon: 'img/icon.png',
glossOnIcon: false,
onReady:function(){
var header = new HeaderBar();
var viewport = new Viewport();
viewport.addDocked(header);
viewport.doComponentLayout();
}
});

[gcallaghan]

[SOLVED] Better workaround ...



AdvertisementComponent = Ext.extend(Ext.Panel,{
layout:'card',
cls:'advertisements',
activeItem:0,
items:[
{html:'<img src="'+ MEDIA_URL +'img/logo.png" />'},
],
widths:{
phone:280,
pad:920
},
height:44,
minWidth:280,
maxWidth:920,
initComponent:function(){
AdvertisementComponent.superclass.initComponent.call(this);
if (Ext.is.Phone){
this.setWidth(this.widths.phone);
} else { this.setWidth(this.widths.pad);}

},
});