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
    35,704
    Vote Rating
    751
    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,119
    Vote Rating
    507
    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,119
    Vote Rating
    507
    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!

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar