1. #1
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    23
    Answers
    1
    Vote Rating
    1
    byu_risk3 is on a distinguished road

      0  

    Default Answered: Model.set() method blurs currently focused field in form panel

    Answered: Model.set() method blurs currently focused field in form panel


    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:
    Screen shot 2013-04-19 at 4.36.10 PM.png

    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!
    Last edited by byu_risk3; 25 Apr 2013 at 8:16 AM. Reason: Clearing up how I use 'save()' vs 'set()'

  2. 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

  3. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,021
    Answers
    385
    Vote Rating
    183
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    I'm seeing that on 4.1.3, but the behavior appears have been fixed with 4.2.

  4. #3
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    23
    Answers
    1
    Vote Rating
    1
    byu_risk3 is on a distinguished road

      0  

    Default


    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).
    Last edited by byu_risk3; 25 Apr 2013 at 8:17 AM. Reason: Clear up error

  5. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,021
    Answers
    385
    Vote Rating
    183
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    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.

  6. #5
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    23
    Answers
    1
    Vote Rating
    1
    byu_risk3 is on a distinguished road

      0  

    Default Example

    Example


    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
    Code:
    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
            myRecord.save({
                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.

  7. #6
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,021
    Answers
    385
    Vote Rating
    183
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    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.

  8. #7
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    23
    Answers
    1
    Vote Rating
    1
    byu_risk3 is on a distinguished road

      0  

    Default Further investigation

    Further investigation


    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()...

    Screen shot 2013-05-31 at 1.45.43 PM.png

    And after Model.set()...

    Screen shot 2013-05-31 at 1.46.01 PM.png

    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.

    Thanks

  9. #8
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    23
    Answers
    1
    Vote Rating
    1
    byu_risk3 is on a distinguished road

      0  

    Default Scratch that

    Scratch that


    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
    Last edited by byu_risk3; 31 May 2013 at 1:09 PM. Reason: Changed misspelled 'suing' to 'using'. I have no legal aspirations lol

Thread Participants: 1

Tags for this Thread