How to apply css rules to html element using ExtJS?


Tags: css,extjs4,opacity

Problem :

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?



Solution :

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);

    CSS Howto..

    How to keep a flex item from overflowing due to its text?

    Wordpress- How do i change the default font of navigation menu?

    How to Get Fixed Children to Play Nicely with their Parents

    How can I stop a text link to go up each time it is selected?

    How can I place a checkbox within a button? [closed]

    How do three.js transforms and CSS3 3D-transforms correspond?

    How to horizontally and vertically center two images on top of each other?

    How to dynamically apply nested base languages in textarea?

    How can I get the post text to be beside the avatar and not below it?

    How can I use css properties with different classes?

    HTML, CSS - I want to create a button “Preview” which will show user his input

    How do I make my React Components to be responsive via css media queries?

    How to place a responsive background according to content height with HTML / CSS?

    How to horizontally center-align the content of a div by manipulating the CSS of the wrapper div only?

    How to pause a CSS keyframe animation when it ends the first cycle?

    How can I include a HTML-encoded “content:” character in CSS? [duplicate]

    How to fix the headline row in a table using css? [closed]

    Stop CSS & Jquery Slideshow from looping

    CSS question - transparent underlined textbox - howto?

    How can I make this image responsive?

    CSS (or jQuery): How to set horizontal scrollbar in the middle position?

    How to hide a column in a DataGrid?

    How to animate back after click with CSS?

    How to create a form that flys out onto the screen using javascript/css

    How to use CSS selectors [closed]

    How to resize CSS Box with increase in content

    How to apply a underline style to piece of text

    CSS: how to style on character height versus line height

    How to make background image with aspect ratio in html and css [closed]

    How to changing css on bootstrap button Group