How to disable action column item for a single row?

Question

Consider this JSON sample :

[{id:1,editable:true},{id:2,editable:false}]

These records are about to be loaded in a store, then displayed inside a grid panel. This grid has an action column item for edition purposes. I'm looking for a way to disable the "edit" button only for the second row without performing computation after rendering. I'd like to use a built in feature which works like the renderer property rather than to loop through the store to update each row once the grid has been rendered.

Does ExtJS 4.1.1 provides this kind of feature?

Answer 1

You can use set the isDisabled config (at least from version 4.2.1):

{
    xtype:'actioncolumn',
    width:20,
    items: [
        {
            icon: 'app/images/edit.png',
            tooltip: 'Edit this row',
            handler: function(gridview, rowIndex, colIndex, item, e, record, row) {
                var grid=gridview.up('grid');
                // You need to listen to this event on your grid.
                grid.fireEvent('editRecord', grid, record);
            },
            isDisabled: function(view, rowIndex, colIndex, item, record) {
                // Returns true if 'editable' is false (, null, or undefined)
                return !record.get('editable');
            }
    ]
}

When isDisabled(..) returns true the icon is blurred and the handler is not triggered on mouse click.

Answer 2

I'm just going to start off by saying this: I avoid using action column at all costs, it's completely unable to do any sort of rendering logic (like different images per row, and showing conditionally based on the row model). Instead define a regular column that renders an image and takes advantage of the click event in the column. Here is an example from my code:

{
    header:    " ",
    dataIndex: "some_index",
    width:     26,
    renderer: function(value, metaData){
        metaData.style += "padding:0px;";
        if(value)
            return "&nbsp;<img src=\"extjs/4.0/sms/icons/fam/magnifier.png\"/>";
        return value;
    },
    listeners: {
        click: function(gridView, htmlSomething, rowIndex, columnIndex, theEvent){
            var store = myGrid.getStore();
            var record = store.getAt(rowIndex);
            if(record.get("some_index"))
                //do action
        }
    }
}

Answer 3

I had forgotten this question until Louis posted his answer. I finally decided to override ActionColumn to add the missing features. Here is the code :

Ext.grid.column.Action.override({
    defaultRenderer: function (v, meta) {
        var me = this,
            disabled, tooltip,
            prefix = Ext.baseCSSPrefix,
            scope = me.origScope || me,
            items = me.items,
            len = items.length,
            i = 0,
            item;
        v = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : '';
        meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
        for (; i < len; i++) {
            item = items[i];
            disabled = item.disabled || (item.isDisabled ? item.isDisabled.apply(item.scope || scope, arguments) : 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;
            }
            v += '<img alt="' + (item.altText || me.altText) + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
            '" class="' + prefix + 'action-col-icon ' + prefix + 'action-col-' + String(i) + ' ' + (disabled ? prefix + 'item-disabled' : ' ') +
            ' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope || scope, arguments) : (item.iconCls || me.iconCls || '')) + '"' +
            (tooltip ? ' data-qtip="' + tooltip + '"' : '') + ' />';
        }
        return v;
    }
});

Answer 4

I found the following solution in the Sencha Forum: Additionally to the "isDisabled"-function already described here, you can use the following config to change (or hide) the icon to display depending on the record:

getClass: function(value,metadata,record){
    if (record.get('description')){  //read your condition from the record
        return 'icon-pencil-go';    // add a CSS-Class to display what icon you like
    } else {
        return '';        //add no CSS-Class
    }
}

My CSS-class is defined as:

.icon-pencil-go {
    background-image: url('../images/icons/famfamfam/pencil_go.png') !important;
}

As I am displaying Icons via CSS anyway, this is a fast way for me to change icons dynamically. Please note, that disabling the handler via "isDisabled" is still nessecary, because otherwise the handler would start if you click the action column even if the icon is not displayed.

Answer 5

Ive used the following in ExtJs 6.0.1 version and works well. Use 'getClass' config. A function which returns the CSS class to apply to the icon image.

                {
                  xtype: 'actioncolumn',
                  flex: 1,
                  text: 'Action'
                  items: [{
                      tooltip: 'Import',
                      getClass: function (value, meta, record) {
                         if(record.get('Name') == 'disable'){
                             return 'x-hidden'; // when u want to hide icon
                         }
                      }
                         return 'x-grid-icon' ; // show icon


                  }]
                }