How to disable the delete button using if condition in Extjs

Question

How to disable the delete button using if condition in Extjs for ex;i want to disable the button if it satifies the given if condition else remain enabled. if(validAction(entityHash.get('entity.xyz'),actionHash.get('action.delete')))

This is the grid Delete button code.

Ext.reg("gridheaderbar-inActive", Ad.GridInActiveButton,{     
             xtype: 'tbspacer', width: 5
});  

Ad.GridCampDeleteButton = Ext.extend(Ext.Toolbar.Button, {

    //text: 'Delete',

    cls: 'ad-img-button',
    width:61,
    height:40,
    iconCls: 'ad-btn-icon',
    icon: '/webapp/resources/images/btn_del.png',
    handler:function(){

        statusChange(this.parentBar.parentGrid, 'Delete')
    }
});

Answer 1

create actioncolumn and make custom renderer:

{
    xtype: 'actioncolumn',
    width: 38,
    renderer: function (val, metadata, record) {
        this.items[0].icon = '${CONTEXT_PATH}/images/' + record.get('fileType') + '.png';
        this.items[0].disabled = !record.get('isDownloadActionEnable');
        this.items[1].disabled = !record.get('isDeleteActionEnable');
        metadata.style = 'cursor: pointer;';
        return val;
    },
    items: [
        {
            icon: '${CONTEXT_PATH}/images/pdf.png',  // Use a URL in the icon config
            tooltip: 'Download',
            handler: function (grid, rowIndex, colIndex) {
                //handle
            }
        },
        {
            icon: '${CONTEXT_PATH}/images/delete.png',  // Use a URL in the icon config
            tooltip: 'Delete',
            handler: function (grid, rowIndex, colIndex) {
                handle
            }
        }
    ]
}

in this example You see additionally how to change dynamically icon.

Answer 2

One way to solve it is to attach a unique ID to your delete button and bind a listener to the selectionchange event of your SelectionModel, whenever the selection changes you can check whatever you want and enable/disable the button as you see fit.

ie.

Ad.GridCampDeleteButton = Ext.extend(Ext.Toolbar.Button, {
    id: 'btnDelete',
    cls: 'ad-img-button',
...
});

and in your selectionmodel do something like this :

var sm = new Ext.grid.CheckboxSelectionModel({
    ...
    ,listeners: {
        'selectionchange' : {
            fn: function(sm) {
                if (sm.hasSelection()) {
                    var selected = sm.getSelected();
                    if (selected.get('field') == value) {
                        Ext.getCmp('btnDelete').disable();
                    }
                    else {
                        Ext.getCmp('btnDelete').enable();
                    }
                }
            }
            ,scope: this
        }
    }
});