PDA

View Full Version : Button click keeps focus



DSoa
2 Jul 2013, 1:45 PM
In ExtJS 4.2.1, clicking a button will highlight it and keep it highlighted. The exception is when the click results in another Ext.Window displayed which clears the original button selection.

This isn't how it worked in 4.1.0. Clicking a button highlighted it until you released the mouse button and it didn't hold onto the focus.

I think the new behavior is confusing especially when some buttons behave differently based on what actions they trigger.

Is there a workaround to get the 4.1.0 behavior?

[Added a screenshot showing the "Home" button stays highlighted after a click]
44694
Thanks.

DSoa
3 Jul 2013, 9:34 AM
I found this in the release notes:

EXTJSIV-8950 - Buttons blur themselves on invocation of their handlers making them and their ancestor hierarchy keyboard-inaccessible

Does this explain the behavior change?

I tried adding a call to blur() in my handler, but that doesn't work.

In ExtJS 3.x, the style for a button that has focus is the browser's default "dashed rectangle outline". See screenshot:
44699
I see this in Firefox and IE (I wasn't even able to tab over to the Save button using Chrome). I would prefer this type of highlighting instead of darkening the entire button. Is there a way to tell ExtJS 4.2.1 to use the browser's styles like 3.x did?

Thanks.

slemmon
3 Jul 2013, 1:13 PM
In 4.2.1 the button is focused after being clicked and the focus class has the same appearance as the mouseover class (it's a known condition and is being discussed on the dev team).

For now you can do something like this to prevent the focused appearance:


Ext.create('Ext.Button', {
text: 'Click me',
focusCls: '',
renderTo: Ext.getBody(),
handler: function() {
//alert('You clicked the button!');
}
});

DSoa
5 Jul 2013, 6:17 AM
Tried that but it didn't bring back the dotted outline. I had to simulate it this way:

Use html and focusCls properties:

{
xtype: 'button',
html: '<span class="my-button-text">Filter...</span>',
focusCls: 'my-button-focus',
...
}

In CSS:

.my-button-text {
padding: 0px 0px 0px 2px;
line-height: 17px;
}
.x-btn-my-button-focus .my-button-text {
border: dotted thin DimGray
}

Result:
44738

The line-height property was necessary to keep the bottom of the border from getting chopped off.

syncsort
2 Apr 2014, 12:50 PM
Is this problem going to be fixed? It has been 1 year but I got the same problem in the latest version of Sencha I downloaded.