Question

I have some buttons in a bottom toolbar of a gridpanel that control adding, and removing records from the row-editing grid.

The handlers are pretty simple: “new” button creates an instance of the model, appends to the grid and then opens a row-editor on the new row; “edit” button just opens the selected row’s row-editor; “remove” destroys the record from the store and refreshes the grid view.

For some reason these buttons don’t lose the focus class that gives them a border when they have the focus. Here is a picture:

In the picture both the “New” button and the “Remove” button have the focus class, when I press the “Edit” button it also keeps the focus classes even after doing a complete row-edit operation and closing the row-editor.

I did find that when I mousedown on one of these permanently “focused” buttons and then mouseup away from it and then click something else the focus class goes away.

I know that I could put a blur handler for all button components in my respective controllers but I would have thought that this functionality was built in so I am asking to see if there is something I missed somewhere in the docs.

The classes that it won’t let go of are these:

x-focus x-btn-focus x-btn-default-toolbar-small-focus

This is with ExtJS 4.1.0 in FF10 on Windows 7. But I did notice similar behavior in ExtJS 4.02 and 4.07, just haven’t needed to handle it until now.

Answer 1

I found out what it was:

At some point in the handler chain for each of these buttons the button gets disabled. When a button is disabled in ExtJS it prevents the blur event from firing.

It was necessary to disable the buttons so the solution to simply add button.blur() in the handler was the correct way to do go about it.