How to disable action column item for a single row?

leaf picture leaf · Mar 21, 2013 · Viewed 26.4k times · Source

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

Louis picture Louis · Jun 12, 2013

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.