How to disable Delete icon in Extjs grid

Question

I have a sample code from extjs, the action is part of multi column of an column where I have edit, delete, duplicate. I want to disable the delete icon based on another field value. I have an another column called IS_USED which returns true/false. The delete button should be disable if IS_USED is true. I tried to write the handler within action but is not working. I am new in extjs, any help or workaround is appreciable.

action: {
  iconCls: 'x-icon-cross-on',
  text:  terms.del,
  url:   url.destroy,
  useAjax: true,
  confirm: terms.confirm,
  handler: function(grid, record, action, domEl, response) {
    if ( !response.success) {
      test.ui.Msg.flash(response.message, test.ui.Msg.ERR);
      javascript.scroll(0,0);
    } else {
      test.ui.Msg.success(response.message);
      grid.getStore().reload();
    }
  }
}

Does this answer your question? [How to disable action column item for a single row?](https://stackoverflow.com/questions/15544482/how-to-disable-action-column-item-for-a-single-row) — Jaydeep, Dec 26 '19 at 11:48

score 0 · Answer 1 · answered Dec 28 '19 at 17:13

The best practice is just bind the "disabled" property to the button directly based on the record value. first, set viewModel:true to the grid.

{
   xtype: 'grid',
   //add this below
   itemConfig:{
     viewModel:true
   },
   //....others props like columns, with,etc....

and the last, in your button add this:

action: {
  iconCls: 'x-icon-cross-on',
  //add this
  bind:{
        disabled:"{record.IS_USED}"  //the logic is placed here
  },
  //.....other props....

You can also bind any other bindable properties as like hidden, text, etc by using this trick.

Hope this can help you.

How to disable Delete icon in Extjs grid

1 Answers1