CODEWITHSUNDEEP
javascriptextjs
MOR_SNOW
MOR_SNOW

Reputation: 831

Assign binding to keys (keyMap)

I am trying to bind keys to some components. My problem is that it only the last component will have a key binded to it. For example: 

switch(element.id) {
        case "menu-1193":
            this.keyNav = new Ext.util.KeyMap({
                target: element.id,
                binding: [{
                     key: "l", 
                     shift: true,
                     fn: function() {
                     alert("It works");                                          
                },                                   
                key: "t",
                fn: function() {
                    alert("yet again");
                }
            }]
        });         
        break;

The key bind above only works on the last key bind, which is the key "t" here. The key "l" does not work or get binded.

So if I add one more key bind, then the key t will not work anymore, but the new binded key will work. So for example

switch(element.id) {
        case "menu-1193":
            this.keyNav = new Ext.util.KeyMap({
                target: element.id,
                binding: [{
                     key: "l", 
                     shift: true,
                     fn: function() {
                     alert("It works");                                          
                },                                   
                key: "t",
                fn: function() {
                    alert("yet again");
                },
                key: "i",
                fn: function() {
                    alert("yet again");
                }
            }]
        });         
        break;

        case: "menu-1194"
        ...

Here the key "i" gets binded and works, but the key "t" does not work anymore. How can I go about with this? I got inspiration from the answer here: how to create shortcut keys in extjs

But I have a special case where I have a dropdown, where I need to have keys binded to the children in the dropdown

Upvotes: 0

Views: 533

Answers (1)

Amit
Amit

Reputation: 46323

That's because you're missing closing brackets. You should use better formatting and LINTing and this will be easy to spot.

switch (element.id) {
  case "menu-1193":
    this.keyNav = new Ext.util.KeyMap({
      target: element.id,
      binding: [{
        key: "l",
        shift: true,
        fn: function() {
          alert("It works");
        }
      } /* <-- THIS WAS MISSING */ , { /* <-- AND THIS */
        key: "t",
        fn: function() {
          alert("yet again");
        }
      }]
    });
    break;

Upvotes: 1

Related Questions