Results 1 to 2 of 2

Thread: .x4-reset class makes impossible to use previous versions of ExtJs

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    May 2009

    Default .x4-reset class makes impossible to use previous versions of ExtJs

    I'm using ExtJs 4 on SandBox mode with an Ext 2.2 application.
    When I have and Ext4 Viewport with, by example, an Ext 2.2 Window showing, the .x4-reset class applied to body (scopeResetCSS = false) or html (scopeResetCSS = true) overrides several Ext22 styles and makes the layout ugly.

    I think that using scoped CSS, theres no reason apply the scope class to body or html since it may cause problems with various other styles.

    Ext version tested:
    • Ext 2.2
    • Ext 4.0.7

    The margins and padding should not be 0 (red arrows), nut are overwriten by .x4-reset * styles.

    Possible fix:
    I managed to fix the problem preventing add x4-reset class to html element and, in case of viewport, adding it to every Viewport child.
        Ext.override(Ext.AbstractComponent, {
            onRender : function(container, position) {
                var me = this,
                    el = me.el,
                    styles = me.initStyles(),
                    renderTpl, renderData, i;
                position = me.getInsertPosition(position);
                if (!el) {
                    if (position) {
                        el = Ext.DomHelper.insertBefore(position, me.getElConfig(), true);
                    else {
                        el = Ext.DomHelper.append(container, me.getElConfig(), true);
                else if (me.allowDomMove !== false) {
                    if (position) {
                        container.dom.insertBefore(el.dom, position);
                    } else {
                if (Ext.scopeResetCSS && !me.ownerCt) {
                    // If this component's el is the body element, we (DON'T) add the reset class to the html tag
                    if (el.dom == Ext.getBody().dom) {
                        //el.parent().addCls(Ext.baseCSSPrefix + 'reset');
                        me.items.each(function(child) {
                            child.addCls(Ext.baseCSSPrefix + 'reset');
                    else {
                        // Else we wrap this element in an element that adds the reset class.
                        me.resetEl = el.wrap({
                            cls: Ext.baseCSSPrefix + 'reset'
                me.el = el;
                renderTpl = me.initRenderTpl();
                if (renderTpl) {
                    renderData = me.initRenderData();
                    renderTpl.append(me.getTargetEl(), renderData);
                me.rendered = true;
    Other information:
    The fix above also solves the viewport problem in sandbox described at

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL


    The sandbox was only said to support Ext JS 3 and Ext JS 4
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:

    Posts are my own, not any current, past or future employer's.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts