Results 1 to 3 of 3

Thread: Attach F9 keymap binding to Checkbox

  1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    49
    Vote Rating
    0
      0  

    Default Unanswered: Attach F9 keymap binding to Checkbox

    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.
    Last edited by nil5286; 28 Feb 2013 at 5:38 AM. Reason: forgot to mention a part of code

  2. #2
    Sencha User
    Join Date
    Oct 2011
    Posts
    35
    Vote Rating
    2
      0  

    Default How does your checkbox get the focus?

    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.

  3. #3
    Sencha User
    Join Date
    Nov 2010
    Posts
    49
    Vote Rating
    0
      0  

    Default

    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.
    Last edited by nil5286; 28 Feb 2013 at 11:51 PM. Reason: formatting

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •