Results 1 to 3 of 3

Thread: Attach F9 keymap binding to Checkbox

  1. 28 Feb 2013, 5:29 AM #1
    nil5286
    nil5286 is offline
    Sencha User
    Join Date
    Nov 2010
    Posts
    49
    Vote Rating
    0
      0  

    Default 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
    Reply With Quote Reply With Quote
  2. 28 Feb 2013, 11:28 AM #2
    ejerrywest
    ejerrywest is offline
    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.
    Reply With Quote Reply With Quote
  3. 28 Feb 2013, 11:48 PM #3
    nil5286
    nil5286 is offline
    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
    Reply With Quote Reply With Quote
« File Upload successful .... screen still masked! | Rowexpander Error »

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
  •  

Forum Rules