You found a bug! We've classified it as EXTJS-6895 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    1
    Vote Rating
    2
    otasyn is on a distinguished road

      2  

    Default Ext.draw.Text on a Ext.toolbar.Toolbar in FIrefox 14 Not Displaying Correctly

    Ext.draw.Text on a Ext.toolbar.Toolbar in FIrefox 14 Not Displaying Correctly


    I'm almost certain that this is a bug with Firefox 14 because this works just fine in Firefox 13 (and IE 9 and Chrome).

    Consider this example (this exists in 4.1.1 as well.):
    HTML Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title>Test ExtJS 4.1.0</title>
            <link rel="stylesheet" type="text/css" href="/js/sencha/extjs-4.1.0/resources/css/ext-sandbox.css" />
            <script type="text/javascript" src="/js/sencha/extjs-4.1.0/builds/ext-all-sandbox-debug.js"></script>
            <script type="text/javascript">
    
    Ext4.onReady(function() {
        Ext4.create('Ext.container.Viewport', {
            layout: 'border',
            items: [{
                region: 'north',
                html: '<h1 class="x-panel-header">Test ExtJS 4.1.0</h1>',
                border: false,
                margins: '0 0 5 0'
            }, {
                region: 'center',
                xtype: 'panel',
                items: {
                    title: 'Main Panel',
                    html: 'Content here.'
                },
                bbar: {
                    xtype: 'toolbar',
                    items: [{
                        xtype: 'text',
                        text: 'Text Here (Ext.draw)'
                    },{
                        text: 'Button'
                    },
                    'Text Here (Ext.toolbar.TextItem)']
                }
            }]
        });
    });
    
            </script>
        </head>
        <body></body>
    </html>
    In Firefox 14, only the top-half of the text is shown at the bottom of it's section on the toolbar. (It's possible that the text is centered on the bottom of the drawing area instead of centered on the middle.)

    Ext.draw.Text on Ext.toolbar.Toolbar Problem.png

    By the way, using Ext.draw.Text in the toolbar may be overkill here since all that is really needed is Ext.toolbar.TextItem (same as simply putting a String in the items array). However, I'm wondering if what I've found is just one noticeable symptom of another problem.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Vote Rating
    846
    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


    Also try outside of the sandbox mode. But I'm not seeing why this shouldn't work in FF 14
    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
    Sencha User
    Join Date
    Jun 2007
    Posts
    5
    Vote Rating
    0
    circusfr is on a distinguished road

      0  

    Default


    Hi,

    an issue in dy attribute ? Maybe the solution will be more complicated, 6 instead of 4 in Ext.draw.engin.Svg

    Code:
    Ext.override(Ext.draw.engine.Svg, {
        tuneText: function (sprite, attrs) {
            var el = sprite.el.dom,
                tspans = [],
                height, tspan, text, i, ln, texts, factor, x;
    
            if (attrs.hasOwnProperty("text")) {            
                text = sprite.tspans && Ext.Array.map(sprite.tspans, function(t) { return t.textContent; }).join('');
    
                if (!sprite.tspans || attrs.text != text) {
                    tspans = this.setText(sprite, attrs.text);
                    sprite.tspans = tspans;
                } else {
                    tspans = sprite.tspans || [];
                }
            }
            
            if (tspans.length) {
                height = this.getBBoxText(sprite).height;
                x = sprite.el.dom.getAttribute("x");
                for (i = 0, ln = tspans.length; i < ln; i++) {
                    factor = (Ext.isFF3_0 || Ext.isFF3_5) ? 2 : 6;
                    tspans[i].setAttribute("x", x);
                    tspans[i].setAttribute("dy", i ? height * 1.2 : height / factor);
                }
                sprite.dirty = true;
            }
        }
    });

  4. #4
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    27
    Vote Rating
    0
    Hanterdro is on a distinguished road

      0  

    Default


    I can confirm this bug with firefox 14 in my project.

    Firefox 13 worked fine.

  5. #5
    Sencha Premium Member
    Join Date
    Jan 2011
    Location
    New Hampshire, USA
    Posts
    14
    Vote Rating
    1
    fitzman49 is on a distinguished road

      0  

    Default


    Verified this happens using a collapsed panel with the panel title set as well . Tested in Firefox 14.0.1. Panel title text renders correctly in Chrome 21 and IE 9 when collapsed. I know this is not related to the toolbar problem but figure it may be a bigger issue so adding my $.02.

    CutoffCollapsed.PNG

  6. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,006
    Vote Rating
    650
    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


    I can reproduce this, however I don't think it's an Ext or FF bug. Can you try running FF in safe mode and seeing if it looks correct? I think it might be an addon compatibility problem.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  7. #7
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,006
    Vote Rating
    650
    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


    On further investigation, it seems to be related to hardware acceleration. To test:

    1) Go to options,
    2) Advanced, general
    3) Uncheck "Use hardware acceleration when available"
    4) Restart browser
    5) Reopen page

    I've opened a ticket on Bugzilla, so we'll see what they say.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  8. #8
    Sencha Premium Member
    Join Date
    Jan 2011
    Location
    New Hampshire, USA
    Posts
    14
    Vote Rating
    1
    fitzman49 is on a distinguished road

      0  

    Default


    Quote Originally Posted by evant View Post
    On further investigation, it seems to be related to hardware acceleration. To test:

    1) Go to options,
    2) Advanced, general
    3) Uncheck "Use hardware acceleration when available"
    4) Restart browser
    5) Reopen page

    I've opened a ticket on Bugzilla, so we'll see what they say.
    Thanks for looking into this Evan. I disabled hardware acceleration in firefox and the issue still persists. Text is still half truncated like my previous screenshot. Let me know if you need any code samples/debug from firebug. I didn't state this earlier but I'm using EXT JS 4.1.1 final.

  9. #9
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,006
    Vote Rating
    650
    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


    To clarify, did you also restart the browser after you set the option? It seems as though it's required to "reset" something.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  10. #10
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,006
    Vote Rating
    650
    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


    Also, for those that are interested, Mozilla has basically said we're on our own with this one anyway, so... looks like we'll need to work around this one.

    https://bugzilla.mozilla.org/show_bug.cgi?id=782253
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!