Results 1 to 6 of 6

Thread: Chart Series itemclick not working on firefox

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1

    Default Chart Series itemclick not working on firefox

    I've found a bug with firefox and the 'itemclick' event on the chart series.
    On my tests, the bug is present only for bar, column, line and pie series.

    I've tested with firefox 28, chrome 34.0.1847.131 and internet explorer 11.0.7

    To reproduce the bug I've added a listener to the example series, for example:
    PHP Code:
    var store Ext.create('Ext.data.JsonStore', {
        
    fields: ['name''data'],
        
    data: [
            { 
    'name''metric one',   'data':10 },
            { 
    'name''metric two',   'data'},
            { 
    'name''metric three''data'},
            { 
    'name''metric four',  'data'},
            { 
    'name''metric five',  'data':27 }
        ]
    });

    Ext.create('Ext.chart.Chart', {
        
    renderToExt.getBody(),
        
    width500,
        
    height300,
        
    animatetrue,
        
    storestore,
        
    axes: [
            {
                
    type'Numeric',
                
    position'left',
                
    fields: ['data'],
                
    label: {
                    
    rendererExt.util.Format.numberRenderer('0,0')
                },
                
    title'Sample Values',
                
    gridtrue,
                
    minimum0
            
    },
            {
                
    type'Category',
                
    position'bottom',
                
    fields: ['name'],
                
    title'Sample Metrics'
            
    }
        ],
        
    series: [
            {
                
    type'column',
                
    axis'left',
                
    highlighttrue,
                
    tips: {
                  
    trackMousetrue,
                  
    width140,
                  
    height28,
                  
    renderer: function(storeItemitem) {
                    
    this.setTitle(storeItem.get('name') + ': ' storeItem.get('data') + ' $');
                  }
                },
                
    label: {
                  
    display'insideEnd',
                  
    'text-anchor''middle',
                    
    field'data',
                    
    rendererExt.util.Format.numberRenderer('0'),
                    
    orientation'vertical',
                    
    color'#333'
                
    },
                
    xField'name',
                
    yField'data',
                
    listeners: {
                    
    itemmousedown: function() {
                        
    console.log(arguments);
                    }
                }
            }
        ]
    }); 
    With chrome and internet explorer the console will show immediately the event, with firefox the event will be fired with a random delay, or not be fired at all.

  2. #2

    Default

    After a few more tests, I've found that the bug affects all mouse events on the serie, you can test it with this example:
    PHP Code:
    var store Ext.create('Ext.data.JsonStore', {
        
    fields: ['name''data'],
        
    data: [
            { 
    'name''metric one',   'data':10 },
            { 
    'name''metric two',   'data'},
            { 
    'name''metric three''data'},
            { 
    'name''metric four',  'data'},
            { 
    'name''metric five',  'data':27 }
        ]
    });

    Ext.create('Ext.chart.Chart', {
        
    renderToExt.getBody(),
        
    width500,
        
    height300,
        
    animatetrue,
        
    storestore,
        
    axes: [
            {
                
    type'Numeric',
                
    position'left',
                
    fields: ['data'],
                
    label: {
                    
    rendererExt.util.Format.numberRenderer('0,0')
                },
                
    title'Sample Values',
                
    gridtrue,
                
    minimum0
            
    },
            {
                
    type'Category',
                
    position'bottom',
                
    fields: ['name'],
                
    title'Sample Metrics'
            
    }
        ],
        
    series: [
            {
                
    type'column',
                
    axis'left',
                
    highlighttrue,
                
    tips: {
                  
    trackMousetrue,
                  
    width140,
                  
    height28,
                  
    renderer: function(storeItemitem) {
                    
    this.setTitle(storeItem.get('name') + ': ' storeItem.get('data') + ' $');
                  }
                },
                
    label: {
                  
    display'insideEnd',
                  
    'text-anchor''middle',
                    
    field'data',
                    
    rendererExt.util.Format.numberRenderer('0'),
                    
    orientation'vertical',
                    
    color'#333'
                
    },
                
    xField'name',
                
    yField'data',
                
    listeners: {
                    
    itemclick: function() {
                        
    console.log('itemclick'arguments);
                    },
                    
    itemmouseup: function() {
                        
    console.log('itemmouseup'arguments);
                    },
                    
    itemmousedown: function() {
                        
    console.log('itemmousedown'arguments);
                    },
                    
    itemmousemove: function() {
                        
    console.log('itemmousemove'arguments);
                    }
                }
            }
        ]
    }); 
    Also, the event 'itemmousemove' is completely ignored by all browsers.

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    In which version of ExtJS are you seeing this issue? I place your example into this Fiddle, but I haven't been able to reproduce this.
    https://fiddle.sencha.com/#fiddle/5jl

  4. #4
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Sorry, I didn't notice your second comment before I posted my own. I've added your new test case to this Fiddle, but I'm still not able to reproduce, except the failure of itemmousemove.
    https://fiddle.sencha.com/#fiddle/5jm

    Which version specific of ExtJS?

  5. #5

    Default

    I'm using ExtJS 4.2.1
    I can see the problem also on your fiddle.
    For example, after having clicked on a column you have to wait few seconds to see the events appears in the firebug console.

  6. #6

    Default

    Ok, I tested with a "firebugless" firefox and I found out you're right, the problem isn't with firefox itself, but with the firebug extension.

    I can't understand, it's the only event affected this way by this extension...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •