item img height ignored?

[psenough]

not sure if it's a bug in sencha, in webkit renderer or in me. but i'm trying to do this:




Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {

var container = new Ext.Container({
items: [
{
html: '<img src="phone_startup.png" />',
listeners: {
click: {
element: 'body',
fn: function(){
alert('image click');
}
}
}
},
{
html: '<h1>First</h1><h2>Last</h2>',
}
],
});

var tabpanel = new Ext.TabPanel({
fullscreen: true,
items: container
});
}
});



seems pretty straight forward, but the text from the second item ends up on top of the image from the first item. if i do a page refresh the renderer renders it properly. its only on first load that it renders it wrong. my guess is the image dimensions arent being accounted for in the first pass. and i can't seem to find any function to refresh the container alone.

i separated it into 2 items to be able to have mouseclick event on the image only, so i can't merge it into 1 item only.

anyone has any clue on whats going on or how to bypass this issue?

maybe a listener that can be attached to onclick of an html tag id or class? instead of just el and body? i failed to find proper documentation on this. /:)

thanks in advance for any hints or help

[jamesgpearce]

The problem is presumably that the layout algorithm fires before the image has loaded and you haven't said how big it's going to be.

Either of these would work, I think:


items: [
{
html: '<img src="phone_startup.png" height="200" />',
...

or


items: [
{
html: '<img src="phone_startup.png" />',
height: 200,
...

See how that goes.

[psenough]

works when using the config height option for the item.
not very useful if i'm planning to change the image and it has different aspect ratios but better then nothing.

i had previously tried without success assigning a css with height declared, and that wasnt working either. i guess sencha applies the css class to whats inside the component but not to the component itself somehow.:-?

eitherway,
big thanks for the help!