How to apply css rules to html element using ExtJS?
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
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?
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
If you are using Ext.Img component you will have to do something like the following: