View Full Version : SPACE on ToggleButton

2 Jun 2011, 6:24 AM
Hi, all.

I have a toolbar

new Ext.Toolbar({
items: [{
text: 'Text',
tooltip: 'Tooltip',
id: 'showGidButton',
enableToggle: true,
clickEvent: 'click',
toggleHandler: function (item, pressed) {
showTooltipInline = pressed;
if (showTooltipInline)
pressed: showTooltipInline

When my toggle button focused, IE and Firefox fires 'click' event when user press SPACE(keyCode=32) button. But Chrome doesn't.

I don't want click event on SPACE button.
How can I enhance this behavior?

2 Jun 2011, 9:26 PM
I don't have a copy of IE handy but for Firefox, Chrome and Opera it seems that space & enter both press buttons (note that Chrome is a bit weird about focus, seems you have to press tab to give a button keyboard focus, clicking on it doesn't give it focus). This isn't an Ext thing, it's built in browser behaviour for buttons.

It seems that cancelling the key event does stop the button being pressed, though browsers disagree about which event you need to cancel. In the browsers I tried the following listeners on my button stopped it being pressed:

listeners: {
afterrender: function(button) {
// Chrome & Opera
button.btnEl.on('keydown', stopper);

// Chrome & Firefox
button.btnEl.on('keyup', stopper);

function stopper(ev) {
if (ev.getKey() === ev.SPACE) {

You'll need to test it against your target browsers.

6 Jun 2011, 1:23 AM
Thank, you skirtle.

Your advice helped me to resolve my problem.