Question

I am drawing an image inside panel and slider field using ExtJS 4. I want to change opacity of image whenever of value of slider field changes.

I am aware that opacity and filter:alpha(opacity=); rule of CSS can be applied to image which will change its opacity.

However I do not know how to apply this css rule to the image. Can anyone please guide me on this?

Answer 1

You can use Ext.dom.Element.setOpacity method:

Ext.fly('image-id').setOpacity(0.5); // this will make img with id 'image-id' become half-transparent

Here is live demo

Update

If you are using Ext.Img component you will have to do something like the following:

imgCmp.getEl().setOpacity(0.5);