Results 1 to 7 of 7

Thread: Chart "panzoom.getModeToggleButton()" Broken when a tooltip is specified.

    You found a bug! We've classified it as EXTJS-17910 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Oct 2007
    Posts
    13
    Vote Rating
    1
      0  

    Default Chart "panzoom.getModeToggleButton()" Broken when a tooltip is specified.

    If a tooltip config is specified, then the panzoom.getModeToggleButton() function returns null.

    I made a fiddle to show this.
    Chart Pan/Zoom get toggle button broken https://fiddle.sencha.com/?fiddle=nd4#fiddle/nd4

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Vote Rating
    292
      0  

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha Premium Member
    Join Date
    Jul 2014
    Posts
    18
    Vote Rating
    4
      0  

    Default

    Any progress/timeline in fixing this. It has been out there for quite a while and is impacting our production feature.

  4. #4
    Sencha User
    Join Date
    Oct 2015
    Posts
    9
    Vote Rating
    2
      0  

    Default

    I am also interested in the progress on this. Any news on the progress so far?

  5. #5
    Sencha Premium Member
    Join Date
    Jun 2014
    Posts
    2
    Vote Rating
    0
      0  

    Default

    I ran into this issue as well. I found a workaround though if anyone else happens to need it. Include itemhighlight in your interactions:

    Code:
    interactions: ['panzoom', 'itemhighlight']

    If you look at the applyTooltip method for Ext.chart.series.Series:

    Code:
    applyTooltip: function (tooltip, oldTooltip) {    var chart = this.getChart(),
            interactions = chart.getInteractions(),
            i, hasItemHighlight;
        var config = Ext.apply({}, tooltip, {
            renderer: Ext.emptyFn,
            constrainPosition: true,
            shrinkWrapDock: true,
            autoHide: true,
            offsetX: 10,
            offsetY: 10
        });
        for (i = 0; i < interactions.length; i++) {
            if (interactions[i].type === 'itemhighlight') {
                hasItemHighlight = true;
                break;
            }
        }
        if (!hasItemHighlight) {
            interactions.push({
                type: 'itemhighlight'
            });
            chart.setInteractions(interactions);
        }
        return new Ext.tip.ToolTip(config);
    }
    It is calling setInteractions when itemhighlight is not present which ultimately resulted in the toolbar buttons being destroyed.

  6. #6
    Sencha User
    Join Date
    Oct 2017
    Posts
    4
    Vote Rating
    0
      0  

    Default

    Hi,
    I encountered the same issue as well. The workaround described above works fine for version 5.1, however I am using ExtJS v5.0.1, and the solution is failing for it. Any update on how we can solve it in v5.0.1.
    Thanks in advance!

  7. #7
    Sencha Premium Member
    Join Date
    Jun 2014
    Posts
    2
    Vote Rating
    0
      0  

    Default

    It looks like 5.0.1 has a typo in the applyTooltip method.
    Code:
    applyTooltip: function (tooltip, oldTooltip) {
        var chart = this.getChart(),
            interactions = chart.getInteractions(),
            i, hasItemHighlight;
        var config = Ext.apply({}, tooltip, {
            renderer: Ext.emptyFn,
            constrainPosition: true,
            shrinkWrapDock: true,
            autoHide: true,
            offsetX: 10,
            offsetY: 10
        });
        for (i = 0; i < interactions.length; i++) {
            if (interactions[i].type === 'itemhightlight') {
                hasItemHighlight = true;
                break;
            }
        }
        if (!hasItemHighlight) {
            interactions.push('itemhighlight');
            chart.setInteractions(interactions);
        }
        return new Ext.tip.ToolTip(config);
    }

    You will need to override that method to fix the typo. This seems to work
    Code:
    Ext.define('override.chart.series.Series', {
        override: 'Ext.chart.series.Series',
        applyTooltip: function (tooltip, oldTooltip) {
            var chart = this.getChart(),
                interactions = chart.getInteractions(),
                i, hasItemHighlight;
            var config = Ext.apply({}, tooltip, {
                renderer: Ext.emptyFn,
                constrainPosition: true,
                shrinkWrapDock: true,
                autoHide: true,
                offsetX: 10,
                offsetY: 10
            });
            for (i = 0; i < interactions.length; i++) {
                if (interactions[i].type === 'itemhighlight') {
                    hasItemHighlight = true;
                    break;
                }
            }
            if (!hasItemHighlight) {
                interactions.push({
                    type: 'itemhighlight'
                });
                chart.setInteractions(interactions);
            }
            return new Ext.tip.ToolTip(config);
        }
    });

Similar Threads

  1. Replies: 2
    Last Post: 10 May 2012, 10:55 AM

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
  •