PDA

View Full Version : [4.0.2] Rotating image doesn't work in IE



andy13c72back
28 Jun 2011, 5:57 AM
Ext.create('Ext.draw.Component', {
renderTo: Ext.get('text-ph'),
id: 'img',
viewBox: false,
width:560,
height:310,

items: [{
type: 'image',
src: "panamera.jpg",
width:560,
height:310
}]
});

Ext.create('Ext.slider.Single', {
renderTo: Ext.get('slider-ph'),
hideLabel: true,
width: 400,
minValue: 0,
maxValue: 360,
listeners: {
change: function(slider, value) {
var sprite = Ext.getCmp('img').surface.items.first();
sprite.setAttributes({
rotation: {
degrees: value
}
}, true);
}
}
});


The code above is to rotate an image when move the slider, this is very similar to the example "Rotating Text with a Draw Component" comes with extjs 4.0.2 package.

It works as expected in Chrome and FF, but it just doesn't work in IE 7+, nothing happens when I move the slider. Did I miss something or it's just a bug?

Many Thx
SiteEx: www.1000kk.cn (http://www.1000kk.cn)

LesJ
28 Jun 2011, 7:49 AM
It's possible rotation doesn't work for image sprites in IE.

This is what I use in jQuery to rotate an element.


$("#myId").animate({rotate: '+=90deg'});

See if this kind of animation is available in Ext. If not, see what jQuery is doing.

MichealKum
20 Mar 2012, 7:58 AM
Try 'rotate' instead of 'rotation'. It works for me.