Reputation: 1855
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:
setStyle
does work, but it doesn't easily allow me to remove a styleaddCls
with CSS attempt 1 loads the CSS, but it gets overridden by .x-accordion-item
addCls
with CSS attempt 2 fails to load the CSSHelp?
Upvotes: 1
Views: 3182
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