image component in extjs

[raghavan0208]

Hi all,

I am using the Ext.Img component. Everything is fine untill i am trying to align using the X and Y coordinates in the panel. It is aligning correctly in chrome and FF3.6. But not in IE8.


I don't know why, anyone faced similar kind of problems.

[skirtle]

Do you see the same problem if you use a different component, rather than an Ext.Img?

Could you post a short test case to demonstrate the problem?

[raghavan0208]

Sure, At first i tried to move the component by mentioning the X and Y position just like in below,

var changingImage = Ext.create('Ext.Img', {
src: 'http://www.sencha.com/img/20110215-feat-html5.png',
x:60,
y:60,
renderTo: Ext.getBody()
});


but nothing happens in all of the browsers, then i embed the Ext.img in a panel and tried to move the panel , just like this

Ext.onReady(function(){


var changingImage = Ext.create('Ext.Img', {
src: 'http://www.sencha.com/img/20110215-feat-html5.png'

// renderTo: Ext.getBody()
});



var panel=Ext.create('Ext.panel.Panel', {
height:200,
width:200,
layout:'box',
header:false,
//html:"Try 1",
x:450,
y:40,
items:[changingImage],
renderTo: Ext.getBody()
});

});



it worked fine on FF4.0.1, chrome but in IE8 the panel is not moving according to the corresponding X and Y position.

At the same time if use other components inside a panel and move it . Things are fine in all of the browsers

Do u think if there is a way to acheive what i am looking for

[skirtle]

Please use CODE tags when posting code (# button on the editor toolbar).

OK, think I can explain this.

In your initial example the top and left CSS properties are set correctly but the img element still has position set to static, so they won't do anything. You'd need to set it to absolute or relative positioning. The easiest way to that is through the cls config option.

As for your second example, with the panel, the problem is your choice of layout. Box layout isn't intended to be used directly like that. If you just get rid of the layout, or pick a suitable layout, it'll work fine.

You also don't need the header: false.