How to disable action column item for a single row?
action, extjs, extjs4, extjs4.1, grid
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;
}
});
Problem
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?