ActionColumn Disabled property cannot be set in getClass method

[hiroprotagonist]

REQUIRED INFORMATION

Ext version tested:

• Ext 4.1.1

Browser versions tested against:

• FF
• Chrome

DOCTYPE tested against:

• html5

Description:

• It is not possible to disable an action column item in the getclass method.

Steps to reproduce the problem:
Just create an action column and try to disable an item in the getClass method. Code listed below.

The result that was expected:
Disabled action item.

The result that occurs instead:
Enabled action item.

Test Case:
xtype:'actioncolumn',
width: 50,
menuDisabled: true,
sortable: false,
items: [{
icon: 'hmet/Content/resources/empty.png',
getClass : function(v, meta, rec) {
console.log('this.items[0].disabled = rec.data.leaf:' + rec.data.leaf);
this.items[0].disabled = rec.data.leaf;
return 'p-grid-action-add'; },
handler : function(view, rowIndex, colIndex, item, e) {
if (!item.disabled) {
this.fireEvent('itemclick', this, 'add', view, rowIndex, colIndex, item, e);
}
}
}

Possible fix:
Default Renderer method of action column class has to be changed, that the disabled property is not read before calling the method itself. Changed lines in bold.

     
// Renderer closure iterates through items creating an <img> element for each and tagging with an identifying
    // class name x-action-col-{n}
    defaultRenderer: function(v, meta){
        var me = this,
            prefix = Ext.baseCSSPrefix,
            scope = me.origScope || me,
            items = me.items,
            len = items.length,
            i = 0,
            item;
            
        // Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!)
        v = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : '';

        meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
        for (; i < len; i++) {
            item = items[i];
            
            // Only process the item action setup once.
            if (!item.hasActionConfiguration) {
                
                // Apply our documented default to all items
                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;
            }

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

[mitchellsimoens]

Have you tried to execute the disable() method instead of setting the disabled config?

[hiroprotagonist]

Hi mitch,

no I didn't try due to the disable method cannot be successful while initiating the rendering process. This was also my first thought but looking at the sources mean that this cannot work. The disable method expects the action columns to be rendered.(Have a look onto the sources, the addCls will certainly fail)

On the other hand it does not make sense to raise events initially. The bugfix is just correcting the wrong ordering of the information that is going to be part of the img that is build for the action column.

regards
hiro.

    disableAction: function(index, silent) {
        var me = this;

        if (!index) {
            index = 0;
        } else if (!Ext.isNumber(index)) {
            index = Ext.Array.indexOf(me.items, index);
        }
        me.items[index].disabled = true;
        me.up('tablepanel').el.select('.' + Ext.baseCSSPrefix + 'action-col-' + index).addCls(me.disabledCls);
        if (!silent) {
            me.fireEvent('disable', me);
        }
    },