I've got a DELETE button that I want to require confirmation. i.e. you must press it twice. First time, simply highlights it. Second time commits to delete. Pressing anywhere other than the button cancels the semi-state.

I've got the CSS working OK, now I'm trying to add the onBlur.

I've shown two independent failed attempts below. I recognize that there is no blur event in the button's event list (I suppose that makes sense, since it's not an input control).

Do I need to add a tap listener to every other component? Or the top component and get it to bubble up?

Code:
 
    xtype:  'button',
    cls:  'btnDelete',
    itemId:  'btnDelete',
    text:  'Delete',
    MRC_checkedState:'off',
    handler: this.btnDeleteItem,
    listeners:{
     blur:{
      element: this,
      fn: function(){
       alert("!");
      }
     }
    }

 btnDeleteItem: function(button,event){
  console.log(button);
  if (button.MRC_checkedState=="semi"){
   LineItem = button.ownerCt;
   var objCaller = LineItem;// set objCaller to this button's line item
   CONCIERGE.DataAccess.deleteItem(objCaller,LineItem.getLIProp("itemId"));
  }
  else{
   button.MRC_checkedState="semi";
   button.addCls("semichecked");
   this.addListener('blur',function(){alert("!")},this);
  }
 },