动态更新 Ext.grid.ActionColumn 中单元格的光标样式

Question

我有一个 Ext.grid.ActionColumn，我想在其中根据内容动态更新列中的单元格。

我已经弄清楚如何为图标和工具提示执行此操作。我只是希望能够为光标样式执行此操作。

这是我目前的情况。

谢谢！

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

只需使用css。描述类方法 getClass returns fiddle example

编辑：

如果您确实需要使用属性设置样式，您可以使用以下覆盖来实现：

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;
    },

});

动态更新 Ext.grid.ActionColumn 中单元格的光标样式

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

css

extjs

extjs4