PDA

View Full Version : Why am I obliged to supply image width and height?



adambuckley
25 Sep 2012, 10:55 AM
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
25 Sep 2012, 5:40 PM
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
26 Sep 2012, 1:39 AM
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
26 Sep 2012, 1:49 AM
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
26 Sep 2012, 2:10 AM
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'
} ]
});
});