View Full Version : Ext.Img layout confusion

25 Dec 2012, 12:49 AM
i cant seem to understand how sencha decides the image size in Ext.Img when height and width is not present. in the following example code, I create a simple container that is bounded in size, within it I put a non background image. I figured the image will lay itself out within the boundaries of the parent container but this is not the case. the image expands way beyond it boundaries (on google chrome in my win 7 pc)
can someone explain this?
what I thought would happen is that the image would use the parent container is order to 'scale' itself down to match the width of the container and change its height in order to keep the image proportions. this is what the layout system is all about isnt it?
BTW, in background mode the image is not even seen.

var cnt = Ext.create('Ext.Container', {
{xtype:'img',src: 'http://upload.wikimedia.org/wikipedia/commons/0/0e/Disen_ramme_700px_width.jpg',mode:'d'}

27 Dec 2012, 6:15 AM
If you were to leave out mode, it will use the background image for the image and therefore you'd get zero height as the <div> doesn't check the background image for any sizing info. You would either need to give the Ext.Img a width/height or have it within a parent using some layout to manage it's size.

Since you have mode : 'd' (anything but 'background') it will use the <img> which will then size to whatever the image is. This is unless you gave a width/height to the Ext.Img or it is within a parent with a layout where that would tell it what size to display as.

So background mode needs to have the size set on it because background image does not tell the <div> what size to have (that is just how CSS works). For any other mode, it will default to the actual image's size. Both cases are dependent on explicitly setting width/height or having it within a parent's layout.

27 Dec 2012, 6:34 AM
but in the example I gave there is a parent container to the image with explicit size set...
so why does the image still acts weird? what am I| missing?

27 Dec 2012, 6:35 AM
That container doesn't have a layout to tell the Ext.Img to display at certain sizes. If you don't want the Ext.Img to show outside the container's size then you need to use the overflow : hidden CSS rule on the container

27 Dec 2012, 6:44 AM
OK sorry. still confused:
tried the following layouts on the parent container:
- fit,hbox,vbox- did not change anything. image still expands beyond the parent container boundries.
- card layout - worked like overflow: hidden meaning it cropped the part of the image beyond the parent container size.
but what I thought would happen is that the image, under any layout, as a part of a layout system would set its width/height to fit the parent.
should it not be this way?

as a side note. when can I query a parent's width/height? on which event its always available?

27 Dec 2012, 7:01 AM
It looks like the CSS has height as 100% and width as auto which would size things correctly if the image was portrait. Changing width to 100% made it actually fit so it's just a matter of some CSS. It fact you could do

.x-img.x-img-image.x-layout-fit-item img {
width : 100%;

To make any image work if it is a direct child of a fit layout.

27 Dec 2012, 7:08 AM
your suggestion worked...
do you think something like this should be built in to the framework? I mean, one fo the goals of introducing Ext.Img was to be able to add images and have them participate in the layout system.
thanks for the help.
BTW, do you have a CSS solution for keeping the image proportions intact?

EDIT: adding height: auto to the css above kept the ratio