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
    Posts
    30

    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


    Screenshot:
    window_troca_senha_-_ext22_on_ext4_viewport.jpg
    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.
    Code:
        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 {
                        container.dom.appendChild(el.dom);
                    }
                }
    
                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.setUI(me.ui);
    
                el.addCls(me.initCls());
                el.setStyle(styles);
    
                me.el = el;
    
                me.initFrame();
    
                renderTpl = me.initRenderTpl();
                if (renderTpl) {
                    renderData = me.initRenderData();
                    renderTpl.append(me.getTargetEl(), renderData);
                }
    
                me.applyRenderSelectors();
    
                me.rendered = true;
            }
        });
    Other information:
    The fix above also solves the viewport problem in sandbox described at http://www.sencha.com/forum/showthre...oxed)&p=700430

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

    Default

    The sandbox was only said to support Ext JS 3 and Ext JS 4
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

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
  •