Dynamically update the cursor style of the cells in an Ext.grid.ActionColumn

Question

I've got an Ext.grid.ActionColumn in which I would like to dynamically update the cells within the column based on their content.

I've figured out how to do this for icons and tooltips. I just want to be able to do it for cursor styles.

Here's what I have so far.

Thanks!

var checkPartsColumn = new Ext.grid.ActionColumn({

    align: 'center',
    width: 50,

    //editor: partsTextField,

    items: [{

        getClass: function (v, meta, rec) {

            var extension = rec.get('fileExtension');
            if (extension === 'XML') {

                //This works...
                this.items[0].tooltip = 'This is an XML file';  

                //This doesn't work...
                this.items[0].cursor = pointer;
                return 'icon-compute';                  
            }
            else {
                this.items[0].tooltip = '';

                //Doesn't work...
                this.items[0].cursor = fingerpointer;


            }
        }
    }]
});

Answer 1

Just use css. Describe the classes that the method getClass returns fiddle example

Edit:

If you are really need set style using attribute, you can do that using following override:

Ext.define('Ext.grid.column.ActionOverride', {
    override: 'Ext.grid.column.Action',
    defaultRenderer: function(v, cellValues, record, rowIdx, colIdx, store, view) {
        var me = this,
            scope = me.origScope || me,
            items = me.items,
            len = items.length,
            i, item, ret, disabled, tooltip;

        ret = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : '';

        cellValues.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
        for (i = 0; i < len; i++) {
            item = items[i];

            disabled = item.disabled || (item.isDisabled ? item.isDisabled.call(item.scope || scope, view, rowIdx, colIdx, item, record) : false);
            tooltip = disabled ? null : (item.tooltip || (item.getTip ? item.getTip.apply(item.scope || scope, arguments) : null));

            if (!item.hasActionConfiguration) {
                item.stopSelection = me.stopSelection;
                item.disable = Ext.Function.bind(me.disableAction, me, [i], 0);
                item.enable = Ext.Function.bind(me.enableAction, me, [i], 0);
                item.hasActionConfiguration = true;
            }

            ret += '<img style="'+item.style+'" role="button" alt="' + (item.altText || me.altText) + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
                '" class="' + me.actionIconCls + ' ' + Ext.baseCSSPrefix + 'action-col-' + String(i) + ' ' +
                (disabled ? me.disabledCls + ' ' : ' ') +
                (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope || scope, arguments) : (item.iconCls || me.iconCls || '')) + '"' +
                (tooltip ? ' data-qtip="' + tooltip + '"' : '') + ' />';
        }
        return ret;
    },

});