View Full Version : Can't updateRule on ExtJS created DOM objects

16 Dec 2010, 10:12 PM
I can update any style attribute on an element I have created and for which I have defined the CSS rule.

Ext.util.CSS.updateRule('.my_test', 'font-size', '4em');This works perfectly. However, when I use a selector for a DOM object ExtJS has created nothing happens. For example, I want to remove the bottom border from the strip spacer just below the tabs in a tab panel. The CSS selector for this DIV tag is "x-tab-strip-spacer' But when I use that selector updateRule doesn't do anythin.

As one might expect, CSS.getRule returns "undefined" for ".x-tab-strip-spacer" but returns "[object CSSStyleRule]" for ".my_test" So its like one rule exists but the other doesn't even though they're both right there in FireBug.

This doesn't make any sense to me. Why should the Ext.util.CSS methods work on a DOM object I define in the same config object, but not work on any of the DOM objects the config object creates itself?

16 Dec 2010, 10:28 PM
If you read the Ext CSS, the rule which styles that element uses a more specific selector:

.x-tab-panel-header-plain .x-tab-strip-spacer, .x-tab-panel-footer-plain .x-tab-strip-spacer {

16 Dec 2010, 11:32 PM
So rather than finding the DOM element in Firebug and using the class name specified in the HTML, the selector we need to use is the the list of selectors Firebug shows under the Style tab to the right of the HTML tab that specifies the exact style attributes we want to change? Is that correct?

If so, is there any other way to identify the full like of selectors necessary, or is Firebug the best?

17 Dec 2010, 12:50 AM
Updating style rules on the fly does not seem to work. I just experimented with it.

17 Dec 2010, 9:56 AM
That's odd, because using the selector list you provided (which was the same as as on line 549 of ext-all.css) I was able to set the bottom border of the tab strip spacer to "0, none" with this line of code:

Ext.util.CSS.updateRule('.x-tab-panel-header-plain .x-tab-strip-spacer, .x-tab-panel-footer-plain .x-tab-strip-spacer', 'border-bottom', '0 none');

Of course the other option, the simplest option, is to just include after the ExtJS styles your own <style> tag that redefines the ExtJS defined style.

.x-tab-panel-header-plain .x-tab-strip-spacer, .x-tab-panel-footer-plain .x-tab-strip-spacer{
border-bottom: 0 none;

When learning a new technology its sometimes easy to miss the most obvious solution.