CODEWITHSUNDEEP
cssextjsextjs4
Colin
Colin

Reputation: 1855

ExtJS: adding CSS

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:

Help?

Upvotes: 1

Views: 3182

Answers (1)

Joe
Joe

Reputation: 2105

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

Upvotes: 1

Related Questions