As for the workaround, you just use this override:
Ext.define('Ext.button.Button', {
override: 'Ext.button.Button',
focusable: false,
});
And the buttons behavior will be back at how it was on Ext.NET 2.5 (actually.. ExtJS 4.x).
On the new ExtJS version, by default any button is navigable thru keyboard, and have a visual feedback for it. I've checked ordinary buttons on Ext.NET 2.5 and they're also not selectable (dotted outline).
I happened to find this website in my search and, it seems that could have been a reason ExtJS changed its buttons behavior to this. Not sure though, as the 'outline' css prop is still as disabled.
I hope this helps you fix your view there! :)
The "problem" (as it might have been proposital) is that when any button if focused now, the x-focus, x-btn-focus and other focus-related classes are bound to the button.
Also, it should have meant to look good on the new themes, and just slipped past the default gray theme. If you look closely to the Crisp theme, it sets a blueish shadow to the selected button on the same example, which just differs on CSS effects from the gray theme.
There is a side effect. On the following example, click on
Click Me button. Alert is shown but Ok button is not focused, so alert is not closed when Enter or Space key is pressed.
<!DOCTYPE html>
<html>
<head runat="server">
<script type="text/javascript">
Ext.define('Ext.button.Button', {
override: 'Ext.button.Button',
focusable: false,
});
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Button Text="Click Me" runat="server">
<Listeners>
<Click Handler="Ext.Msg.alert('Information', 'Ext.Net');" />
</Listeners>
</ext:Button>
</body>
</html>
I am gonna try to find a more stable approach.
