Question

I’ve tried Ext.DomHelper.createDom but it creates an object without applying the document styles to it. The Ext.util.CSS.getRules can get all the rules, but I’d have to manually figure out which styles will be overridden and which’ll be applied.

Is there an easy way to get the styles given a class list?

Answer 1

Ext JS doesn’t provide a way to get all the styles for an element, but you can do it with a bit of plain old javascript after the element has been appended to the dom:

Ext.onReady(function() {

    var el = Ext.DomHelper.append(document.body, {
        tag: 'div',
        cls: 'foo'
    }),
    styles;

    if (window.getComputedStyle) {
        // use getComputedStyle if supported
        styles = window.getComputedStyle(el);
    } else {
        // fall back to currentStyle for IE8 and below
        styles = el.currentStyle;
    }

    // get a style
    alert(styles.fontSize);

});

Of course if you just need to get a specific style, I’d recommnend using the getStyle() method of Ext.Element because it handles the browser differences for you.