Search code examples
extjsgridextjs4actionextjs4.1

How to disable action column item for a single row?


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?


Solution

  • 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;
        }
    });