How to change the cursor using ExtJS

Question

I would like to set a column of a grid to change cursor to pointer once hovered.

I dunno if its best practice to apply a style to it, you tell me please.

I just cant figure it out.

This is my code and I wish the column would change cursor upon mouse hover.

Ext.define('Ext.grid.Panel', {
store: services,
xtype: 'log',
features: [groupingFeature],
stateId: 'stateGrid',
columns: [
    {
        text: 'URL',
        sortable: true,
        flex: true,
        dataIndex: 'url'
    }
  ]
});

thank you for help

Answer 1

It works for me:

columns: [
{
    text: 'URL',
    sortable: true,
    flex: true,
    dataIndex: 'url',
    renderer: function (val, metadata, record) {
            metadata.style = 'cursor: pointer;'; 
        return val;
    }
}]

Answer 2

With most components, one can directly attach CSS snippets alike:

 Ext.define('...', {
    extend: 'Ext.chart.CartesianChart',
    legend: {
        style: 'cursor: pointer;'
    }
});

When using a renderer, one can also attach a CSS class (and whatever styles):

renderer: function (value, meta, record) {
     meta.tdCls += 'x-cursor-pointer'; 
     return value;
}

Ext.grid.column.Column also has a componentCls property: Ext.grid.column.Column#cfg-componentCls and a style property: Ext.grid.column.Column#cfg-style... which would set the style for the the whole column, instead of each indivivual row - or one can combine, by adding a class to the whole column and further classes with the renderer, according to the values (and then use these combined CSS selectors).