Attach F9 keymap binding to Checkbox

**nil5286** · 28 Feb 2013 5:29 AM

hi,
I want to uncheck the checkbox on click of f9 key.

I tried the below code:

Code:

<script type="text/javascript">
    Ext.onReady(function () { 
      var checkbox = Ext.create("Ext.form.field.Checkbox",
        {
          id: "checkbox_ID",
          renderTo: "checkbox_DIV",
          boxLabel: "Checkbox Test",
      clearFieldFn: function () {
            var me = this;
            me.setValue(false);
     },
         listeners:
            {
              afterrender: function(checkbox)
                {
                    checkbox.inputEl.on('keyup', function (field, e) {
                        if (e.getKey() == Ext.EventObject.F9) {
                            field.clearFieldFn();
                        }
                    });
                                    
                    checkbox.labelEl.on('keyup', function (field, e) {
                        if (e.getKey() == Ext.EventObject.F9) {
                            field.clearFieldFn();
                        }
                    });
                    checkbox.getEl().on('keyup', function (field, e) {
                        if (e.getKey() == Ext.EventObject.F9) {
                            field.clearFieldFn();
                        }
                    });                    
           checkbox.getEl().addKeyMap({
            eventName: "keyup",
            binding: [{
                key: Ext.EventObject.F9,
                fn: function () {
                    this.clearFieldFn();
                },
                scope: checkbox
                }]
          });
                }             
             }
          });        
        });
</script>
</head>
<body>
  <div id="checkbox_DIV"></div>
</body>
</html>

Thanks in advance.

**ejerrywest** · 28 Feb 2013 11:28 AM

It seems like any of your handlers would work. But you have to make sure that the checkbox has the focus first otherwise it will not fire any events at all and none of your handlers would get called.

I imagine you are trying to tab onto the checkbox to focus it and then press [F9] to change it?

Make sure you set the tabIndex property of the checkbox so you can focus it with the keyboard.

**nil5286** · 28 Feb 2013 11:48 PM

ejerrywest, thanks for the reply,
to get the focus currently i click on the control and then i want with the help of F9 i should be able to uncheck it.

The below code works but it doesn't work in Chrome.

Code:

             
 afterrender: function(checkbox)	{
		checkbox.getEl().on('click', function()
		{
		  alert("Checkbox is clicked!");
		});
		checkbox.on('keyup', function (field, e) {
		if (e.getKey() == Ext.EventObject.F9) {
			checkbox.clearFieldFn();
		}
		});
		checkbox.getEl().on('keyup', function(evt, t, o) {
			if (evt.getKey() == Ext.EventObject.F9) {
				checkbox.clearFieldFn();
			}
		});
	}

Any suggestions.

Attach F9 keymap binding to Checkbox

Thread Tools

Search Thread

Display

Unanswered: Attach F9 keymap binding to Checkbox

Unanswered: Attach F9 keymap binding to Checkbox

How does your checkbox get the focus?

How does your checkbox get the focus?

Tags for this Thread