View Full Version : Model.set() method blurs currently focused field in form panel

19 Apr 2013, 2:45 PM
Problem: whenever I call Model.set(field, newvalue), it causes the currently focused field in my form panel to lose focus! Is there any way I can make it so that set() does not blur the currently focused field?

Here is a picture of my setup:

I have it so that after 2 seconds or so, the 'update' event triggers, I call Model.set() with the new values, and then I sync() the store (essentially doing a Model.save()). So, if the user is in the middle of updating something, is causes the current field to lose focus.

I can get around this by trying to re-focus it, but it gets real messy real quick with the way I am handling my updates. If it never blurred in the first place, that would make things so much easier.

I think it may blur because of validations called when the record is set, but I don't know how to turn them off or what is going on.

Thanks in advance for any help!

22 Apr 2013, 10:40 AM
I'm seeing that on 4.1.3, but the behavior appears have been fixed with 4.2.

25 Apr 2013, 7:41 AM
Sorry, I messed up my description. I am using the Model.set() method, not the Model.save() method, when it blurs, just in case anyone is confused.

I've swapped in ExtJs 4.2.0, and I still get the same results. When I call myRecord.set(), it unblurs the current field, and when I comment that out, no problem (but no updated record).

25 Apr 2013, 4:10 PM
Can you post a quick test case to show the issue? I'll test on my machine with 4.2 and the latest 4.2.1 beta.

26 Apr 2013, 8:49 AM
Background for this simplified example:
I have a formPanel with fields and a gridPanel. I have a store attached to the grid.
I listen to the grid's 'select' event, and load the formPanel with the grid's selected record.
Then, in order to have immediate updates, I listen to the 'change' event for each field in the form panel, and submit the updates to the server.

Here is the important part:
This is the function I have attached to each field's change event that sets the record and syncs it with the server

var onMyFormPanelFieldChange = function( thisField, newValue, oldValue, eOpts ){
var myGrid = this.getMyGrid();
var fieldName = thisField.getName();

// Get the selected record
var myRecord = myGrid.getSelectionModel().getSelection()[0];
// Update the field
myRecord.set( fieldName, newValue );
// Commit to server
callback: function( thisBatch, eOpts ){
// This is where I have to re-focus the field I just updated, because set() blurs it!
scope: this


Note that I actually implement the update portion of the handler in a delayedTask, so it doesn't send an update on every keystroke, but the idea is the same.

Thanks for the help, hope this makes the problem clear.

26 Apr 2013, 1:13 PM
Ok. Thx. I'll see if I can come back to this one and build a complete test case with the grid and form included once I get some free time.

Or, if you get a minute to make a test case with the components included before I do all the better. :)

31 May 2013, 11:55 AM
So, I started logging all the events I could think of, and found that the currently selected field loses focus sometime after the grid's ITEMUPDATE event.

Here are some pictures that show this. (I changed MfgPn from highlighted text to 5 via set())

Before Model.set()...


And after Model.set()...


As you can see, once I use Model.set, the associated grid tries to update its own stuff, which triggers the itemupdate event. Also note that I am NOT syncing the change in this instance.

However, I tried re-focusing the field in the itemupdate event, but I'm too early. Are there any other events after grid.itemupdate that I am missing?

It seems to be some kind of dirty indicator event that is painting the red triangle to the grid while blurring the currently selected field in the process.


31 May 2013, 12:25 PM
It turns out that the grid's itemupdate event DOES solve my problem! I just forgot to uncomment the one line of code in my itemupdate event handler that refocuses the field during all my testing.

So, moral of the thread: Listen to the grid's itemupdate event if you lose focus after Model.set() and you want the user's focus to remain on the currently focused field.

I still don't like the fact the the grid blurs the currently selected field when updating one of its items, but at least I can work around it now.

Would this blurring count as a bug? I'm still using Ext 4.1.3