how to keep the highligh on a bar chart?

var colors = ['url(#v-1)',
                  'url(#v-2)',
                  'url(#v-3)',
                  'url(#v-4)',
                  'url(#v-5)'];

    var baseColor = '#eee';

    Ext.define('Ext.chart.theme.Fancy', {
        extend: 'Ext.chart.theme.Base',

        constructor: function(config) {
            this.callParent([Ext.apply({
                axis: {
                    fill: baseColor,
                    stroke: baseColor
                },
                axisLabelLeft: {
                    fill: baseColor
                },
                axisLabelBottom: {
                    fill: baseColor
                },
                axisTitleLeft: {
                    fill: baseColor
                },
                axisTitleBottom: {
                    fill: baseColor
                },
                colors: colors
            }, config)]);
        }
    });


    var win = Ext.create('Ext.Panel', {
        width: 1000,
        height: 300,
        hidden: false,
        maximizable: true,
        title: 'Column Chart',
        renderTo: Ext.getBody(),
        enableToggle: true,
        pressed: true,
        layout: 'fit',
        items: {
            id: 'chartCmp',
            xtype: 'chart',
            theme: 'Fancy',
            animate: {
                easing: 'bounceOut',
                duration: 750
            },
            store: store,
            background: {
                fill: 'rgb(17, 17, 17)'
            },
            gradients: [
            {
                'id': 'v-1',
                'angle': 0,
                stops: {
                    0: {
                        color: 'rgb(212, 40, 40)'
                    },
                    100: {
                        color: 'rgb(117, 14, 14)'
                    }
                }
            },
            {
                'id': 'v-2',
                'angle': 0,
                stops: {
                    0: {
                        color: 'rgb(180, 216, 42)'
                    },
                    100: {
                        color: 'rgb(94, 114, 13)'
                    }
                }
            },
            {
                'id': 'v-3',
                'angle': 0,
                stops: {
                    0: {
                        color: 'rgb(43, 221, 115)'
                    },
                    100: {
                        color: 'rgb(14, 117, 56)'
                    }
                }
            },
            {
                'id': 'v-4',
                'angle': 0,
   开发者_开发百科             stops: {
                    0: {
                        color: 'rgb(45, 117, 226)'
                    },
                    100: {
                        color: 'rgb(14, 56, 117)'
                    }
                }
            },
            {
                'id': 'v-5',
                'angle': 0,
                stops: {
                    0: {
                        color: 'rgb(187, 45, 222)'
                    },
                    100: {
                        color: 'rgb(85, 10, 103)'
                    }
                }
            }],
            axes: [{
                type: 'Numeric',
                position: 'left',
                fields: ['Quantidade'],
                minimum: 0,
//                maximum: 100,
                label: {
                    renderer: Ext.util.Format.numberRenderer('0,0')
                },
                title: 'Numero de Processos',
                grid: {
                    odd: {
                        stroke: '#555'
                    },
                    even: {
                        stroke: '#555'
                    }
                }
            }, {
                type: 'Category',
                position: 'bottom',
                fields: 'Range',
                title: 'Espaço temporal'
            }],
            series: [{
                type: 'column',
                axis: 'left',
                highlight: true,
            highlightCfg: {
                    fill: '#a2b5ca'
                },
            label: {
                  display: 'insideEnd',
                  'text-anchor': 'middle',
                  //Numero que aparece em cima da barra
                    field: 'Quantidade',
                    orientation: 'horizontal',
                    fill: '#fff',
                    font: '17px Arial'
                },
                renderer: function(sprite, storeItem, barAttr, i, store) {
                    barAttr.fill = colors[i % colors.length];
                    return barAttr;
                },
                style: {
                    opacity: 0.95
                },


                listeners: {
                    'itemmousedown': function(item) {
                     if(!flag) return flag;
                     flag = false;
                    var cmp = Ext.getCmp('chartCmp');
                         var series = cmp.series.get(0);
                             index = Ext.Array.indexOf(series.items, item);
                             selectionModel = grid.getSelectionModel();
                         selectedStoreItem = item.storeItem;
                        var as = selectedStoreItem.data.Range;
                         storeDadosFiltrados.proxy.extraParams.range = as;
                         storeDadosFiltrados.load();


                         }


                },
                xField: 'Range',
                yField: ['Quantidade']
            }]
        },
        renderTo:'grafico'
    });


});

image of the chart--> http://alojaimagens.com/viewer.php?file=zz7slhsprnopuoui1mpv.jpg

I am selecting the first column, and i don't click it, just with the mouse over it. The higlight color is a variante of blue. But in the code i use itemmousedown, and i don't understand why the bar changed color only by passing by the mouse? how can i put it only highlight only in mouse click?

What about highlight: false? If you just want the bar to be highlighted by a click, you should add a listener which highlights it on clicking the bar.