Botões mantendo sua classe de foco após perder o foco

Question

Eu tenho alguns botões na barra de ferramentas inferior de um painel de grade que controlam a adição e remoção de registros da grade de edição de linha.

Os manipuladores são bem simples:O botão "novo" cria uma instância do modelo, anexa à grade e então abre um editor de linha na nova linha;o botão "editar" apenas abre o editor de linhas da linha selecionada;"remove" destrói o registro do armazenamento e atualiza a visualização em grade.

Por alguma razão, esses botões não perdem a classe de foco que lhes dá uma borda quando estão em foco.Aqui está uma foto:

Na imagem tanto o botão "Novo" quanto o botão "Remover" possuem a classe de foco, quando pressiono o botão "Editar" ele também mantém as classes de foco mesmo depois de realizar uma operação completa de edição de linha e fechar o editor de linha.

Eu descobri que quando eu coloco o mouse em um desses botões permanentemente "focados" e, em seguida, afasto o mouse dele e clico em outra coisa, a classe de foco desaparece.

Eu sei que poderia colocar um manipulador de desfoque para todos os componentes dos botões em meus respectivos controladores, mas teria pensado que essa funcionalidade foi incorporada, então estou pedindo para ver se há algo que perdi em algum lugar dos documentos.

As classes que ele não abandona são estas:

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

Isso ocorre com ExtJS 4.1.0 no FF10 no Windows 7.Mas notei um comportamento semelhante no ExtJS 4.02 e 4.07, mas não precisei lidar com isso até agora.

Answer 1

Eu descobri o que era:

Em algum ponto da cadeia de manipuladores de cada um desses botões, o botão é desativado.Quando um botão está desabilitado no ExtJS ele impede o blur evento de disparo.

Foi necessário desabilitar os botões para que a solução fosse simplesmente adicionar button.blur() no manipulador era a maneira correta de fazer isso.