Ext JS Image in Viewport - extjs

Question

I need some help in inserting an image in 'north' panel of Viewport.
The prob is, upon page load, size of north region is set to default: 20px. As a result, only some portion of image is visible. I want it to be adjusted as per the image height.
But as I click on split panels, it adjusts as per the size of image (seems some rendering problem at load?)
following is the ext js code.. Using Ext Js 5.0
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: 'border',
items: [
{
region: 'north',
html: '<img src="..." alt="" />',
border: false,
margin: '0 0 0 0',
},{
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Contents',
html: 'The first tab\'s content. Others may be added dynamically'
}
}
]
});
Thanks in advance!

Answer 1

First problem is that when you use border layout, few items are required:
Any Container using the Border layout must have a child item with region:'center'. The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.
Any child items with a region of west or east may be configured with either an initial width, or a Ext.layout.container.Box.flex value, or an initial percentage width string (Which is simply divided by 100 and used as a flex value). The 'center' region has a flex value of 1.
Any child items with a region of north or south may be configured with either an initial height, or a Ext.layout.container.Box.flex value, or an initial percentage height string (Which is simply divided by 100 and used as a flex value). The 'center' region has a flex value of 1.
See the doc for more info.
So I would change your panel to hbox, set the main container with flex: 1 and add some logic to make sure that when you load the images the container's layout is updated to fix it's height.
Code below, hope it helps:
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: 'vbox',
items: [
{
border: false,
margin: '0 0 0 0',
items : [{
xtype : 'image',
src : 'http://cdn.sencha.io/img/touch2/Sencha-SDK-Tools-icon.png',
listeners : {
boxready : function (component) {
component.getEl().on('load', function(){
component.ownerCt.updateLayout();
});
}
}
}],
layout: {
type: 'anchor'
}
},{
flex: 1,
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Contents',
html: 'The first tab\'s content. Others may be added dynamically'
}
}
]
});