Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-5678 in a recent build.
  1. #1
    Ext JS Premium Member
    Join Date
    Sep 2009
    Posts
    20
    Vote Rating
    0
    jkelley is on a distinguished road

      0  

    Default [4.1 RC1] Scoped CSS Incorrect in IE7/8

    [4.1 RC1] Scoped CSS Incorrect in IE7/8


    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.1 RC1
    Browser versions tested against:
    • IE8
    • IE7
    • Chrome
    Description:
    • If you open the test case below in IE7/8, any of the browser specific CSS doesn't apply properly. For modern browsers (I tested in Chrome as well) this isn't really a problem that I can see, though it's still possible other errors can arise from the same thing.
    • I reported this previously several versions ago as part of another issue, but it was not resolved despite the thread being marked as fixed. That thread can be found here: http://www.sencha.com/forum/showthre...=scoperesetcss. That particular thread provides a good overview of which classes are incorrect in the SASS.
    Test Case:
    Code:
    <html>
        <head>
            <title>Test</title>
            <link rel="stylesheet" type="text/css" href="resources/css/ext-all-scoped.css" />
            <script type="text/javascript" src="ext-all-debug.js"></script>
            <script type="text/javascript">
                Ext.scopeResetCSS = true;
    
                Ext.onReady(function()
                {
                    var store = Ext.create('Ext.data.ArrayStore', {
                        fields: ['company', 'price', 'change'],
                        data: [
                            ['3m Co',                               71.72, 0.02],
                            ['Alcoa Inc',                           29.01, 0.42],
                            ['Altria Group Inc',                    83.81, 0.28],
                            ['American Express Company',            52.55, 0.01],
                            ['American International Group, Inc.',  64.13, 0.31],
                            ['AT&T Inc.',                           31.61, -0.48]
                        ]
                    });
    
                    var grid = Ext.create('Ext.grid.Panel', {
                        title: 'Array Grid',
                        store: store,
                        columns: [
                            {text: 'Company', flex: 1, dataIndex: 'company'},
                            {text: 'Price', width: 75, dataIndex: 'price'},
                            {text: 'Change', width: 75, dataIndex: 'change'}
                        ],
                        height: 200,
                        width: 400,
                        renderTo: 'test',
                        viewConfig: {
                            listeners: {
                                render: function(view) {
                                    view.tip = Ext.create('Ext.tip.ToolTip', {
                                        // The overall target element.
                                        target: view.el,
                                        // Each grid row causes its own seperate show and hide.
                                        delegate: view.itemSelector,
                                        // Moving within the row should not hide the tip.
                                        trackMouse: true,
                                        // Render immediately so that tip.body can be referenced prior to the first show.
                                        renderTo: Ext.getBody(),
                                        listeners: {
                                            // Change content dynamically depending on which element triggered the show.
                                            beforeshow: function updateTipBody(tip) {
                                                tip.update('Over company "' + view.getRecord(tip.triggerElement).get('company') + '"');
                                            }
                                        }
                                    });
                                }
                            }
                        }
                    });
                });
            </script>
        </head>
        <body>
            <div id="test"></div>
        </body>
    </html>

    HELPFUL INFORMATION

    Additional CSS used:
    • Only ext-all-scoped.css
    Operating System:
    • WinXP Pro

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,806
    Vote Rating
    834
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    We can take a look at it.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member
    Join Date
    Sep 2009
    Posts
    20
    Vote Rating
    0
    jkelley is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    We can take a look at it.
    Thanks for the quick response!

  4. #4
    Ext JS Premium Member rstuart's Avatar
    Join Date
    Jan 2008
    Location
    Brisbane, Australia
    Posts
    140
    Vote Rating
    4
    rstuart is on a distinguished road

      0  

    Default


    There are definitely other problems in modern browsers as well. See this thread for a few of them. For whatever reason, the button controls on fields get a width of 0px in the style attribute of the td element when using scoped css.

  5. #5
    Ext JS Premium Member rstuart's Avatar
    Join Date
    Jan 2008
    Location
    Brisbane, Australia
    Posts
    140
    Vote Rating
    4
    rstuart is on a distinguished road

      0  

    Lightbulb


    Line 102752 of ext-all-debug-w-comments.js reads:

    Code:
    style: 'width:' + me.triggerWidth + (hideTrigger ? 'px;display:none' : 'px'),
    My JS debugger says that me.triggerWidth is always 0. If triggerWidth isn't defined when initCompnent of Ext.form.field.Trigger is run, then it tries to compute the width of the trigger:

    Code:
    if (!me.triggerWidth) {            
        Ext.form.field.Trigger.prototype.triggerWidth = (tempEl = Ext.getBody().createChild({style: 'position:absolute', cls: Ext.baseCSSPrefix + 'form-trigger'})).getWidth();
        tempEl.remove();
    }
    The problem with this is that it is working with the body of the document, not the element that Ext creates with the x-reset class. The css rule that gives a trigger its width is x-form-trigger (the class applied to the temporary element). When using it in scoped mode, that css rule becomes:

    Code:
      .x-reset .x-form-trigger {
        background-image: url('../../resources/themes/images/default/form/trigger.gif');
        background-position: 0 0;
        width: 17px;
        height: 21px;
        border-bottom: 1px solid #b5b8c8;
        cursor: pointer;
        cursor: hand;
        overflow: hidden; }
    Notice the .x-reset. The body element doesn't have the x-reset class and hence this rule is never matched. That fixes some of the problems in the thread I linked to but it doesn't address other scoped problems.

  6. #6
    Sencha User
    Join Date
    Jul 2011
    Location
    San Francisco, CA
    Posts
    103
    Vote Rating
    5
    alicexyl is on a distinguished road

      0  

    Default


    I see this line in initExtCss function:
    Code:
            initExtCss = function() {
                   ...
                    if (!Ext.scopeResetCSS) {
                         add('reset');
                    }
            ...
    add() accumulates a list of classes that are then applied to body tag. Should that line be negation? If we're not using scope reset, why add the reset class?
    Last edited by alicexyl; 29 Aug 2012 at 10:39 AM. Reason: More details

  7. #7
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,835
    Vote Rating
    609
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    x-reset refers to the CSS reset that normalizes default values across browser. We only add it to the body if you're not scoping the css.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  8. #8
    Sencha User
    Join Date
    Jul 2011
    Location
    San Francisco, CA
    Posts
    103
    Vote Rating
    5
    alicexyl is on a distinguished road

      0  

    Default


    If that's so, the usage of this class doesn't seem very clear to me then. For instance, in your SASS code, you use the class only if $scope-reset-css is true (I'm assuming that's the SASS conterpart of scopeResetCss ):
    Code:
    // _reset.scss
    @if $scope-reset-css {
        .#{$prefix}border-box .#{$prefix}reset, 
        .#{$prefix}border-box .#{$prefix}reset * {
            box-sizing:border-box;
            -moz-box-sizing:border-box;
            -ms-box-sizing:border-box;
            -webkit-box-sizing:border-box;
        }
    
    
        .#{$prefix}reset {
            html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3,
            h4, h5, h6, pre, code, form, fieldset, legend,
            input, textarea, p, blockquote, th, td {
                margin:0;
                padding:0;
            }
    ...
    There are also places in your js code where you add the class if scopeResetCss is true:
    Code:
        onRender : function(container, position) {
        ...
            if (Ext.scopeResetCSS && !me.ownerCt) {
                
                if (el.dom == Ext.getBody().dom) {
                    el.parent().addCls(Ext.baseCSSPrefix + 'reset');
                }
                else {
                    
                    me.resetEl = el.wrap({
                        cls: Ext.baseCSSPrefix + 'reset'
                    });
                }
            }
    Could you give more details as to how the class x-reset is used?

    Update: I have Ext JS 4.1.0.

  9. #9
    Sencha User
    Join Date
    Jul 2011
    Location
    San Francisco, CA
    Posts
    103
    Vote Rating
    5
    alicexyl is on a distinguished road

      0  

    Default


    Also, the scoped stylesheet isn't generated correctly because of how the SASS code is structured. In ext4/default/_all.scss, the reset class is wrapped around all the module @includes:
    Code:
    @if $scope-reset-css {
        .#{$prefix}reset {
            @if $include-default {
                @include extjs-boundlist;
                @include extjs-button;
    ...
    Inside module code, we have code e.g.:
    Code:
        @if not $supports-gradients or $compile-all {
            @if $background-gradient != null {
                .#{$prefix}nlg { 
                    .#{$prefix}btn-#{$ui} {
                        background-repeat: repeat-x;
                        background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-bg.gif');
                    }
                }
            }
    So in the final CSS, the class selectors are not generated in correct order for a scoped sheet:
    Code:
    .x-reset .x-nlg .x-btn-default-small
    What you need are smarter browser/feature selectors. For instance, take .x-nlg:
    Code:
    $nlg-selector: if($scoped-reset-css, '.#{$prefix}nlg &', '.#{$prefix}nlg');
    Then instead of .#{$prefix}nlg, use #{$nlg-selector}:
    Code:
    @if not $supports-gradients or $compile-all {
            @if $background-gradient != null {
                #{$nlg-selector} { 
                    .#{$prefix}btn-#{$ui} {
                         ...
                    }
                }
            }
    Then the selectors will be generated in the right order:
    Code:
    .x-nlg .x-reset  .x-btn-default-small
    UPDATE: I just realized that if there's an SASS existing selector '.#{$prefix}nlg &', we can't just replace .#{$prefix}nlg there. Extra logic is needed to make sure '&' is applied ONLY if $scope-reset-css is false.

    Also, the fix should eliminate the need to run NeoJS's sed script: http://www.sencha.com/forum/showthread.php?142841-Ext.scopeResetCSS-Tooltip-Positioning-Issues/page2&highlight=scoperesetcss

    U
    PDATE 2: I suggest that instead of using $scope-reset-css in _all.scss, that it be put into all the widget @mixins. Otherwise people who want to @include individual modules instead of using ext4/default/all would not be generating a scoped stylesheet.
    Last edited by alicexyl; 29 Aug 2012 at 2:57 PM. Reason: More detail

  10. #10
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,835
    Vote Rating
    609
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    If you look at the file:

    Code:
    @if $scope-reset-css {
        .#{$prefix}border-box .#{$prefix}reset, 
        .#{$prefix}border-box .#{$prefix}reset * {
            box-sizing:border-box;
            -moz-box-sizing:border-box;
            -ms-box-sizing:border-box;
            -webkit-box-sizing:border-box;
        }
    
        .#{$prefix}reset {
            html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3,
            h4, h5, h6, pre, code, form, fieldset, legend,
            input, textarea, p, blockquote, th, td {
                margin:0;
                padding:0;
            }
    
    // snip
    @else {
        html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3,
        h4, h5, h6, pre, code, form, fieldset, legend,
        input, textarea, p, blockquote, th, td {
            margin:0;
            padding:0;
        }
    You'll see it just resets the styles directly, there's no need for x-reset, because it's already applied to the elements themselves. Similarly, if we're scoped, we wrap any components inside an x-reset div, so the reset changes are localized to that element, instead of being applied to the whole document.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi