1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    45
    Vote Rating
    0
    nil5286 is on a distinguished road

      0  

    Default Unanswered: Attach F9 keymap binding to Checkbox

    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
    ejerrywest is on a distinguished road

      0  

    Default How does your checkbox get the focus?

    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
    45
    Vote Rating
    0
    nil5286 is on a distinguished road

      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

Thread Participants: 1

Tags for this Thread