How can I prevent bubbled events after I set focus to a textarea?

Question

I have the following:

xtype: 'gridpanel',
id: 'myGridPanel',
columns: [...],
store: myStore,
listeners: {
  select: function(){
    Ext.getCmp('myTextArea').focus();
    console.log('Text area has focus here');
  }
}

myTextArea has focus right after I call .focus() but when my program execution leaves the select function it loses focus. I think the problem is that there is program execution that happens after the select listener gets called and that execution is changing the focus. How do I prevent the bubbled events from changing focus?

Answer 1

The select event fires before the row gets highlighted graphically. I assume that's when the focus gets set to something else (the selected row), as happens a lot in Ext.js code.

You have different options to try (haven't tried them right now, just recollecting from memory):

1. Use the beforeselect event and return false, then the underlying selection will be cancelled. This only works if you don't need the actual row selection. This is equivalent to stopping event bubbling as you asked.

2. Use a timeout, e.g. Ext.util.DelayedTask and wait a few milliseconds before you set focus to the textarea. In this case you preserve the underlying row selection. This might be your best option.

3. Play with the selectionchange event. It might behave differently regarding timing.