ExtJS: adding CSS

Question

I'm new to the web side of things, and am confused how to deal with CSS. (Thankfully), there is little direct manipulation of HTML/CSS when using ExtJS4 so far... so now that I'm in need to change the CSS, I'm having problems.

Specifically, I'm trying to dynamically change the color of accordion header backgrounds.

Javascript:

    afterrender: function(subForm) {
        subForm.getHeader().getEl().addCls('custom-accordion-hd-valid');
        // this works - so I know it's the right element.
        subForm.getHeader().getEl().setStyle('background', 'hsl(100, 60%, 60%)');
    }

CSS:

// attempt 1
.custom-accordion-hd-valid {
background: green;
}

// attempt 2
.custom-accordion-hd-valid .x-accordion-hd {
background: green;
}

So:

setting style via setStyle does work, but it doesn't easily allow me to remove a style
setting via addCls with CSS attempt 1 loads the CSS, but it gets overridden by .x-accordion-item
setting via addCls with CSS attempt 2 fails to load the CSS

Help?

Joe · Accepted Answer · 2013-11-08 17:56:48Z

1

if you for instance wanted to remove the background style you set here:

subForm.getHeader().getEl().setStyle('background', 'hsl(100, 60%, 60%)');

css will allow you to simply override it by setting it again eg:

subForm.getHeader().getEl().setStyle('background', 'none');

or

subForm.getHeader().getEl().setStyle('background', 'blue');

css has a particular priority on how it judges which styles are most "important" when multiple styles are provided - take a look here at this great article on css specificity

and realize by using that setStyle() method you are applying "inline" styles to these elements, where as other css definitions either in a file or in a style html tag have a lower priority

answered Nov 8, 2013 at 17:56

Joe

2,1051 gold badge18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Colin Over a year ago

Ah great link! I didn't know I could remove the inline that easily! Helps a ton. Do you know why my attempts at using addCls failed?

Colin Over a year ago

Specifically - the 2nd attempt where the css wasn't loaded. Is this the correct syntax?

Collectives™ on Stack Overflow

ExtJS: adding CSS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related