Viewport dosent show panel's content unless refresh/resize page.

[firstlove88]

Hi all,

I have a image inside my panel on my application and it only appear after i resize or refresh the window page.
Just a bit more information on my panel, my viewport will call for the panel to display at the 'north' region. And in my 'north' region, there's 2 items, a toolbar and then this panel which is not displaying the image unless i refresh/resize the page.

Here's my code for the panel:

var banner = Ext.create ('Ext.panel.Panel', {

html: '<img src =\'resources/background.jpg\'></img>
layout: 'fit' 
});

I've tried banner.dolayout() but its not working.


Here's my code for the viewport which will display the panel in the north region :

Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{

region: 'north',
items" [header, banner]
},.....]
});

[slemmon]

Try putting height/width attribs / style on the img tag and see if that works.

[firstlove88]

Hi,

Thanks for the reply! It does work!

But i've another consideration which is if i set a fix height and width, does it mean my that image would not fit to screen if its shown on other monitor of different resolution as i've fixed the height and width.

Is there anyway to solve this problem?

[slemmon]

Try height:100% and width:100%

[firstlove88]

The panel does not display the image unless refresh/resize the window again.

Any idea is it panel problem or is there other component that i can use to display a image?

[slemmon]

Closest thing I can think is to add a load listener to the image and once it loads do an updateLayout() on the panel its in.

[firstlove88]

I just solved it by setting the width to auto, and i just set a value to the height. It still works.

So i guess its not a issue now for taller monitor as my concern was with the width of the image rather than the height of the image. .

Thanks!