Extjs change color of plot points with addCls(), a

Question

I'm trying to use the addCls() method for sprites to change the color of a scatter plot point once it has been clicked on. So far, my code changes the color of the highlight that comes up when you mouse-over the point but not the color of the point itself.

Here is my itemclick listener, defined under the series config in the chart definition.

               listeners: {
                    itemclick: function(record, o){
                            console.log(record.sprite);
                            record.sprite.addCls('green-sprite');
                    }
               }

My css for the class 'green-sprite' looks like this:

 .green-sprite{
    stroke: rgb(0,100,0) !important;
    fill: rgb(0,100,0) !important;
    color: #99CC99 !important;
 }

Any tips would be much appreciated!

Answer 1

I created a simple example and found that it's the way in which ExtJS renders each scatter point. Essentially, each point consists of more than one sprite. The one you have access to via record.sprite is the sprite created directly for the data point but then, to apply shadows, several other sprites are rendered.

If you turn off shadows for the scatter series then it should work. e.g.

var win = Ext.create('Ext.Window', {
            width: 800,
            height: 600,
            hidden: false,
            shadow: false,
            maximizable: true,
            title: 'Scatter Chart Renderer',
            renderTo: Ext.getBody(),               
            layout: 'fit',
            items: {
                id: 'chartCmp',
                xtype: 'chart',
                style: 'background:#fff',
                animate: true,
                store: store1,
                axes: false,
                shadow: false,
                insetPadding: 50,            
                series: [{
                    type: 'scatter',
                    axis: false,
                    xField: 'data1',
                    yField: 'data2',
                    listeners: {
                        itemmouseup: function(record, o)
                        {
                            record.sprite.addCls('green-sprite');
                        }
                    },
                    color: '#ccc',
                    markerConfig: {
                        type: 'circle',
                        radius: 20,
                        size: 20
                    }
                }]
            }
        });   

Take a look at this fiddle to see a working example: http://jsfiddle.net/JXUFN/ I've tested in Chrome and Internet Explorer 9 and it seems to do the trick.