Ext js check column - change focus on checkchange

Question

What I want to have happen: After clicking a checkbox in a row, set focus on another column in the same row.

What is actually happening: Focus is set on the other column, but focus is lost almost immediately. Focus returns to the row, rather than the checkbox (or staying with the text area).

I've tried a few different options for changing focus using plugins RowEditing and CellEditing, but the focus does not persist.

I thought adding a delay might do the job, but I can't configure the listener correctly to use a delay. I also thought adding a preventDefault call in the checkchange listener might do the job as well, but I haven't figured out what the event is inside checkchange to call preventDefault on.

The listener (added as part of the CheckColumn config) is defined as:

listeners: {
  checkchange: function(cc, index, ischecked, eOpts){
    console.log(arguments);
    if (ischecked){
      //  focus on price input box
      item_grid.plugins[0].startEdit(index, 6);
      // prevent default here would be helpful, as it would hopefully
      // keep the focus from jumping back to this column from the text column
      // I am having trouble capturing what the event is in this listener
    }
  }
}

I've looked at How to focus on editable textfield when checkbox is checked in ExtJS Grid? but that only changes the means of changing focus; focus still jumps back to the row.

Answer 1

The solution/workaround that I decided on was to just delay the change in focus event until after the checkchange listener was finished it's execution.

I'm not 100% with this, but it works for now.

listeners: {
  checkchange: function(cc, index, ischecked, eOpts){
    if (ischecked){
      Ext.create('Ext.util.DelayedTask', function(){
        //  focus on price input box
        item_grid.plugins[0].startEdit(index, 6);
      }).delay(150);
    }
  }
}