Why am I obliged to supply image width and height?

[adambuckley]

Hi All,

I'm just starting out with Ext JS 4. I have found that if include an image in a container, then I must supply image width and height configs otherwise the image won't be rendered properly.

Why is this? I thought that if they are not specified, Ext JS would just inspect an image to retrieve the dimensions automatically (like HTML does).

Here is a code fragment:


Ext.define('ExtCopNew.view.PageHeader',
{
extend : 'Ext.Container',
alias : 'widget.pageHeader',
region : 'north',
cls : 'pageHeader',
padding : 20,


items : [
{
xtype : 'container',


layout :
{
type : 'vbox'
},


items : [
{
xtype : 'image',
src : 'img/logo.jpg',
height : 58,
width : 116
} ]
} ]
});


This works as I've supplied the width and height. If I remove them, then my image vanishes!

Many thanks, Adam.

[evant]

Because it doesn't know the size of the image, because it hasn't loaded by the time the layout has run, clear your cache before running this, with the var image line commented and then not:



var url = 'http://src.sencha.io/64/http://img1.sencha.com/files/misc/apple-touch-icon.png';
Ext.onReady(function() {
//var image = new Image(url);
setTimeout(function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
padding: 20,
xtype: 'container',
items: {
xtype: 'image',
src: url
}
}, {
region: 'center'
}]
});
}, 5000);
});

[adambuckley]

Thanks for the reply.

This behaviour would cause trouble when we want to re-brand an Ext JS app using different sized logos.

But I guess in this case, we can just rely on CSS to define the size of images, yes?

[evant]

As long as the size is loaded. It's not really feasible for us to detect the scenario of "Did any image inside this component or any of it's children, recursively, load".

[adambuckley]

Thanks Evant, that will solve any future issues re-branding the app without needing to touch the JavaScript.

I have confirmed that this code will correctly display the image as expected.


style.css


img.myImage {
height: 64;
width: 64
}


app.js


Ext.onReady(function()
{
Ext.create('Ext.container.Viewport',
{
layout : 'border',


items : [
{
region : 'north',
xtype : 'container',


items :
{
xtype : 'image',
src : 'http://src.sencha.io/64/http://img1.sencha.com/files/misc/apple-touch-icon.png',
cls : 'myImage'
}
},


{
region : 'center'
} ]
});
});