Page 1 of 2 12 LastLast
Results 1 to 10 of 13

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

    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
      2  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Vote Rating
    1272
      0  

    Default

    Also try outside of the sandbox mode. But I'm not seeing why this shouldn't work in FF 14
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Jun 2007
    Posts
    5
    Vote Rating
    0
      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
      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
      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
    18,584
    Vote Rating
    873
      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
    Twitter - @evantrimboli

  7. #7
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,584
    Vote Rating
    873
      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
    Twitter - @evantrimboli

  8. #8
    Sencha Premium Member
    Join Date
    Jan 2011
    Location
    New Hampshire, USA
    Posts
    14
    Vote Rating
    1
      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
    18,584
    Vote Rating
    873
      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
    Twitter - @evantrimboli

  10. #10
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,584
    Vote Rating
    873
      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
    Twitter - @evantrimboli

Page 1 of 2 12 LastLast

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
  •