Ext JS 4.1.3 Sencha Docs

Ext.util.KeyMap

Alternate names

Ext.KeyMap

Hierarchy

Ext.Base
Ext.util.KeyMap

Files

Handles mapping key events to handling functions for an element or a Component. One KeyMap can be used for multiple actions.

A KeyMap must be configured with a target as an event source which may be an Element or a Component.

If the target is an element, then the keydown event will trigger the invocation of bindings.

It is possible to configure the KeyMap with a custom eventName to listen for. This may be useful when the target is a Component.

The KeyMap's event handling requires that the first parameter passed is a key event. So if the Component's event signature is different, specify a processEvent configuration which accepts the event's parameters and returns a key event.

Functions specified in bindings are called with this signature : (String key, Ext.EventObject e) (if the match is a multi-key combination the callback will still be called only once). A KeyMap can also handle a string representation of keys. By default KeyMap starts enabled.

Usage:

// map one key by key code
var map = new Ext.util.KeyMap({
    target: "my-element",
    key: 13, // or Ext.EventObject.ENTER
    fn: myHandler,
    scope: myObject
});

// map multiple keys to one action by string
var map = new Ext.util.KeyMap({
    target: "my-element",
    key: "a\r\n\t",
    fn: myHandler,
    scope: myObject
});

// map multiple keys to multiple actions by strings and array of codes
var map = new Ext.util.KeyMap({
    target: "my-element",
    binding: [{
        key: [10,13],
        fn: function(){ alert("Return was pressed"); }
    }, {
        key: "abc",
        fn: function(){ alert('a, b or c was pressed'); }
    }, {
        key: "\t",
        ctrl:true,
        shift:true,
        fn: function(){ alert('Control + shift + tab was pressed.'); }
    }]
});

Since 4.1.0, KeyMaps can bind to Components and process key-based events fired by Components.

To bind to a Component, use the single parameter form of constructor and include the Component event name to listen for, and a processEvent implementation which returns the key event for further processing by the KeyMap:

var map = new Ext.util.KeyMap({
    target: myGridView,
    eventName: 'itemkeydown',
    processEvent: function(view, record, node, index, event) {

        // Load the event with the extra information needed by the mappings
        event.view = view;
        event.store = view.getStore();
        event.record = record;
        event.index = index;
        return event;
    },
    binding: {
        key: Ext.EventObject.DELETE,
        fn: function(keyCode, e) {
            e.store.remove(e.record);

            // Attempt to select the record that's now in its place
            e.view.getSelectionModel().select(e.index);
            e.view.el.focus();
        }
    }
});

Available since: 1.1.0

Defined By

Config options

Ext.util.KeyMap
view source
: Object/Object[][]
Either a single object describing a handling function for s specified key (or set of keys), or an array of such objects. ...

Either a single object describing a handling function for s specified key (or set of keys), or an array of such objects.

Available since: 4.1.0

  • key : String/String[]

    A single keycode or an array of keycodes to handle

  • shift : Boolean

    True to handle key only when shift is pressed, False to handle the key only when shift is not pressed (defaults to undefined)

  • ctrl : Boolean

    True to handle key only when ctrl is pressed, False to handle the key only when ctrl is not pressed (defaults to undefined)

  • alt : Boolean

    True to handle key only when alt is pressed, False to handle the key only when alt is not pressed (defaults to undefined)

  • handler : Function

    The function to call when KeyMap finds the expected key combination

  • fn : Function

    Alias of handler (for backwards-compatibility)

  • scope : Object

    The scope of the callback function

  • defaultEventAction : String

    A default action to apply to the event. Possible values are: stopEvent, stopPropagation, preventDefault. If no value is set no action is performed.

Ext.util.KeyMap
view source
: String
The event to listen for to pick up key events. ...

The event to listen for to pick up key events.

Defaults to: 'keydown'

Available since: 4.1.0

Configure this as true if there are any input fields within the target, and this KeyNav should not process events fro...

Configure this as true if there are any input fields within the target, and this KeyNav should not process events from input fields, (<input>, <textarea> and elements withcontentEditable="true"`)

Defaults to: false

Available since: 4.1.1

An optional event processor function which accepts the argument list provided by the configured event of the target, ...

An optional event processor function which accepts the argument list provided by the configured event of the target, and returns a keyEvent for processing by the KeyMap.

This may be useful when the target is a Component with s complex event signature, where the event is not the first parameter. Extra information from the event arguments may be injected into the event for use by the handler functions before returning it.

Available since: 4.1.0

The scope (this context) in which the processEvent method is executed. ...

The scope (this context) in which the processEvent method is executed.

Defaults to: this

Available since: 4.1.0

Ext.util.KeyMap
view source
: Ext.Component/Ext.Element/HTMLElement/String

The object on which to listen for the event specified by the eventName config option.

The object on which to listen for the event specified by the eventName config option.

Available since: 4.1.0

Properties

Defined By

Instance properties

...

Defaults to: 'Ext.Base'

Available since: 4.1.1

...

Defaults to: {}

Available since: 4.1.1

...

Defaults to: []

Available since: 4.1.1

...

Defaults to: {}

Available since: 4.1.1

...

Defaults to: true

Available since: 4.1.1

Get the reference to the current class from which this object was instantiated. ...

Get the reference to the current class from which this object was instantiated. Unlike statics, this.self is scope-dependent and it's meant to be used for dynamic inheritance. See statics for a detailed comparison

Ext.define('My.Cat', {
    statics: {
        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
    },

    constructor: function() {
        alert(this.self.speciesName); // dependent on 'this'
    },

    clone: function() {
        return new this.self();
    }
});


Ext.define('My.SnowLeopard', {
    extend: 'My.Cat',
    statics: {
        speciesName: 'Snow Leopard'         // My.SnowLeopard.speciesName = 'Snow Leopard'
    }
});

var cat = new My.Cat();                     // alerts 'Cat'
var snowLeopard = new My.SnowLeopard();     // alerts 'Snow Leopard'

var clone = snowLeopard.clone();
alert(Ext.getClassName(clone));             // alerts 'My.SnowLeopard'

Available since: 4.0.0

Defined By

Static properties

...

Defaults to: []

Available since: 4.1.1

Methods

Defined By

Instance methods

Ext.util.KeyMap
view source
new( config ) : Ext.util.KeyMap
...

Available since: 1.1.0

Parameters

Returns

Fires

    Ext.util.KeyMap
    view source
    ( binding )
    Add a new binding to this KeyMap. ...

    Add a new binding to this KeyMap.

    Usage:

    // Create a KeyMap
    var map = new Ext.util.KeyMap(document, {
        key: Ext.EventObject.ENTER,
        fn: handleKey,
        scope: this
    });
    
    //Add a new binding to the existing KeyMap later
    map.addBinding({
        key: 'abc',
        shift: true,
        fn: handleKey,
        scope: this
    });
    

    Available since: 1.1.0

    Parameters

    • binding : Object/Object[]

      A single KeyMap config or an array of configs. The following config object properties are supported:

      • key : String/Array

        A single keycode or an array of keycodes to handle.

      • shift : Boolean

        True to handle key only when shift is pressed, False to handle the keyonly when shift is not pressed (defaults to undefined).

      • ctrl : Boolean

        True to handle key only when ctrl is pressed, False to handle the key only when ctrl is not pressed (defaults to undefined).

      • alt : Boolean

        True to handle key only when alt is pressed, False to handle the key only when alt is not pressed (defaults to undefined).

      • handler : Function

        The function to call when KeyMap finds the expected key combination.

      • fn : Function

        Alias of handler (for backwards-compatibility).

      • scope : Object

        The scope of the callback function.

      • defaultEventAction : String

        A default action to apply to the event. Possible values are: stopEvent, stopPropagation, preventDefault. If no value is set no action is performed..

    Fires

      ( args ) : Objectdeprecatedprotected
      Call the original method that was previously overridden with override Ext.define('My.Cat', { constructor: functi...

      Call the original method that was previously overridden with override

      Ext.define('My.Cat', {
          constructor: function() {
              alert("I'm a cat!");
          }
      });
      
      My.Cat.override({
          constructor: function() {
              alert("I'm going to be a cat!");
      
              this.callOverridden();
      
              alert("Meeeeoooowwww");
          }
      });
      
      var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                                // alerts "I'm a cat!"
                                // alerts "Meeeeoooowwww"
      

      Available since: 4.0.0

      This method has been deprecated

      as of 4.1. Use callParent instead.

      Parameters

      • args : Array/Arguments

        The arguments, either an array or the arguments object from the current method, for example: this.callOverridden(arguments)

      Returns

      • Object

        Returns the result of calling the overridden method

      Call the "parent" method of the current method. ...

      Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see Ext.define).

       Ext.define('My.Base', {
           constructor: function (x) {
               this.x = x;
           },
      
           statics: {
               method: function (x) {
                   return x;
               }
           }
       });
      
       Ext.define('My.Derived', {
           extend: 'My.Base',
      
           constructor: function () {
               this.callParent([21]);
           }
       });
      
       var obj = new My.Derived();
      
       alert(obj.x);  // alerts 21
      

      This can be used with an override as follows:

       Ext.define('My.DerivedOverride', {
           override: 'My.Derived',
      
           constructor: function (x) {
               this.callParent([x*2]); // calls original My.Derived constructor
           }
       });
      
       var obj = new My.Derived();
      
       alert(obj.x);  // now alerts 42
      

      This also works with static methods.

       Ext.define('My.Derived2', {
           extend: 'My.Base',
      
           statics: {
               method: function (x) {
                   return this.callParent([x*2]); // calls My.Base.method
               }
           }
       });
      
       alert(My.Base.method(10);     // alerts 10
       alert(My.Derived2.method(10); // alerts 20
      

      Lastly, it also works with overridden static methods.

       Ext.define('My.Derived2Override', {
           override: 'My.Derived2',
      
           statics: {
               method: function (x) {
                   return this.callParent([x*2]); // calls My.Derived2.method
               }
           }
       });
      
       alert(My.Derived2.method(10); // now alerts 40
      

      To override a method and replace it and also call the superclass method, use callSuper. This is often done to patch a method to fix a bug.

      Available since: 4.0.0

      Parameters

      • args : Array/Arguments

        The arguments, either an array or the arguments object from the current method, for example: this.callParent(arguments)

      Returns

      • Object

        Returns the result of calling the parent method

      ( args ) : Objectprotected
      This method is used by an override to call the superclass method but bypass any overridden method. ...

      This method is used by an override to call the superclass method but bypass any overridden method. This is often done to "patch" a method that contains a bug but for whatever reason cannot be fixed directly.

      Consider:

       Ext.define('Ext.some.Class', {
           method: function () {
               console.log('Good');
           }
       });
      
       Ext.define('Ext.some.DerivedClass', {
           method: function () {
               console.log('Bad');
      
               // ... logic but with a bug ...
      
               this.callParent();
           }
       });
      

      To patch the bug in DerivedClass.method, the typical solution is to create an override:

       Ext.define('App.paches.DerivedClass', {
           override: 'Ext.some.DerivedClass',
      
           method: function () {
               console.log('Fixed');
      
               // ... logic but with bug fixed ...
      
               this.callSuper();
           }
       });
      

      The patch method cannot use callParent to call the superclass method since that would call the overridden method containing the bug. In other words, the above patch would only produce "Fixed" then "Good" in the console log, whereas, using callParent would produce "Fixed" then "Bad" then "Good".

      Available since: Ext JS 4.1.3

      Parameters

      • args : Array/Arguments

        The arguments, either an array or the arguments object from the current method, for example: this.callSuper(arguments)

      Returns

      • Object

        Returns the result of calling the superclass method

      Ext.util.KeyMap
      view source
      ( binding, event ) : Booleanprivate
      Check if the modifiers on the event match those on the binding ...

      Check if the modifiers on the event match those on the binding

      Available since: 4.0.0

      Parameters

      Returns

      • Boolean

        True if the event matches the binding

      ...

      Available since: 4.1.1

      Ext.util.KeyMap
      view source
      ( removeTarget )
      Destroys the KeyMap instance and removes all handlers. ...

      Destroys the KeyMap instance and removes all handlers.

      Available since: 4.0.0

      Parameters

      Fires

        Overrides: Ext.Base.destroy

        Ext.util.KeyMap
        view source
        ( )
        Disable this KeyMap ...

        Disable this KeyMap

        Available since: 1.1.0

        Ext.util.KeyMap
        view source
        ( )
        Enables this KeyMap ...

        Enables this KeyMap

        Available since: 1.1.0

        ...

        Available since: 4.1.0

        Parameters

        Returns the initial configuration passed to constructor when instantiating this class. ...

        Returns the initial configuration passed to constructor when instantiating this class.

        Available since: 4.1.0

        Parameters

        • name : String (optional)

          Name of the config option to return.

        Returns

        • Object/Mixed

          The full config object or a single config value when name parameter specified.

        Ext.util.KeyMap
        view source
        ( event )private
        Process the event from the target. ...

        Process the event from the target.

        Available since: 4.1.1

        Parameters

        ...

        Available since: 4.1.0

        Parameters

        ( config ) : Ext.Basechainableprotected
        Initialize configuration for this class. ...

        Initialize configuration for this class. a typical example:

        Ext.define('My.awesome.Class', {
            // The default config
            config: {
                name: 'Awesome',
                isAwesome: true
            },
        
            constructor: function(config) {
                this.initConfig(config);
            }
        });
        
        var awesome = new My.awesome.Class({
            name: 'Super Awesome'
        });
        
        alert(awesome.getName()); // 'Super Awesome'
        

        Available since: 4.0.0

        Parameters

        Returns

        Ext.util.KeyMap
        view source
        ( ) : Boolean
        Returns true if this KeyMap is enabled ...

        Returns true if this KeyMap is enabled

        Available since: 1.1.0

        Returns

        Ext.util.KeyMap
        view source
        ( el, binding, [eventName] )private
        Old constructor signature ...

        Old constructor signature

        Available since: 4.1.0

        Parameters

        Fires

          Ext.util.KeyMap
          view source
          ( key, fn, [scope] )
          Shorthand for adding a single key listener. ...

          Shorthand for adding a single key listener.

          Available since: 1.1.0

          Parameters

          • key : Number/Number[]/Object

            Either the numeric key code, array of key codes or an object with the following options: {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}

          • fn : Function

            The function to call

          • scope : Object (optional)

            The scope (this reference) in which the function is executed. Defaults to the browser window.

          Fires

            ( names, callback, scope )private
            ...

            Available since: 4.1.0

            Parameters

            Ext.util.KeyMap
            view source
            ( binding, event )private
            Process a particular binding and fire the handler if necessary. ...

            Process a particular binding and fire the handler if necessary.

            Available since: 4.0.0

            Parameters

            Fires

              ( config, applyIfNotSet ) : Ext.Basechainableprivate
              ...

              Available since: 4.0.0

              Parameters

              Returns

              Ext.util.KeyMap
              view source
              ( disabled )
              Convenience function for setting disabled/enabled by boolean. ...

              Convenience function for setting disabled/enabled by boolean.

              Available since: 3.4.0

              Parameters

              Fires

                Get the reference to the class from which this object was instantiated. ...

                Get the reference to the class from which this object was instantiated. Note that unlike self, this.statics() is scope-independent and it always returns the class from which it was called, regardless of what this points to during run-time

                Ext.define('My.Cat', {
                    statics: {
                        totalCreated: 0,
                        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
                    },
                
                    constructor: function() {
                        var statics = this.statics();
                
                        alert(statics.speciesName);     // always equals to 'Cat' no matter what 'this' refers to
                                                        // equivalent to: My.Cat.speciesName
                
                        alert(this.self.speciesName);   // dependent on 'this'
                
                        statics.totalCreated++;
                    },
                
                    clone: function() {
                        var cloned = new this.self;                      // dependent on 'this'
                
                        cloned.groupName = this.statics().speciesName;   // equivalent to: My.Cat.speciesName
                
                        return cloned;
                    }
                });
                
                
                Ext.define('My.SnowLeopard', {
                    extend: 'My.Cat',
                
                    statics: {
                        speciesName: 'Snow Leopard'     // My.SnowLeopard.speciesName = 'Snow Leopard'
                    },
                
                    constructor: function() {
                        this.callParent();
                    }
                });
                
                var cat = new My.Cat();                 // alerts 'Cat', then alerts 'Cat'
                
                var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'
                
                var clone = snowLeopard.clone();
                alert(Ext.getClassName(clone));         // alerts 'My.SnowLeopard'
                alert(clone.groupName);                 // alerts 'Cat'
                
                alert(My.Cat.totalCreated);             // alerts 3
                

                Available since: 4.0.0

                Returns

                Defined By

                Static methods

                ( config )privatestatic
                ...

                Available since: 4.1.1

                Parameters

                ( members )chainableprivatestatic
                ...

                Available since: 4.1.1

                Parameters

                ( name, member )chainableprivatestatic
                ...

                Available since: 4.1.1

                Parameters

                ( members )chainablestatic
                Add methods / properties to the prototype of this class. ...

                Add methods / properties to the prototype of this class.

                Ext.define('My.awesome.Cat', {
                    constructor: function() {
                        ...
                    }
                });
                
                 My.awesome.Cat.addMembers({
                     meow: function() {
                        alert('Meowww...');
                     }
                 });
                
                 var kitty = new My.awesome.Cat;
                 kitty.meow();
                

                Available since: 4.1.0

                Parameters

                ( members ) : Ext.Basechainablestatic
                Add / override static properties of this class. ...

                Add / override static properties of this class.

                Ext.define('My.cool.Class', {
                    ...
                });
                
                My.cool.Class.addStatics({
                    someProperty: 'someValue',      // My.cool.Class.someProperty = 'someValue'
                    method1: function() { ... },    // My.cool.Class.method1 = function() { ... };
                    method2: function() { ... }     // My.cool.Class.method2 = function() { ... };
                });
                

                Available since: 4.0.2

                Parameters

                Returns

                ( xtype )chainableprivatestatic
                ...

                Available since: 4.1.1

                Parameters

                ( fromClass, members ) : Ext.Basechainableprivatestatic
                Borrow another class' members to the prototype of this class. ...

                Borrow another class' members to the prototype of this class.

                Ext.define('Bank', {
                    money: '$$$',
                    printMoney: function() {
                        alert('$$$$$$$');
                    }
                });
                
                Ext.define('Thief', {
                    ...
                });
                
                Thief.borrow(Bank, ['money', 'printMoney']);
                
                var steve = new Thief();
                
                alert(steve.money); // alerts '$$$'
                steve.printMoney(); // alerts '$$$$$$$'
                

                Available since: 4.0.2

                Parameters

                • fromClass : Ext.Base

                  The class to borrow members from

                • members : Array/String

                  The names of the members to borrow

                Returns

                Create a new instance of this Class. ...

                Create a new instance of this Class.

                Ext.define('My.cool.Class', {
                    ...
                });
                
                My.cool.Class.create({
                    someConfig: true
                });
                

                All parameters are passed to the constructor of the class.

                Available since: 4.0.2

                Returns

                Overrides: Ext.layout.Layout.create

                ( alias, origin )static
                Create aliases for existing prototype methods. ...

                Create aliases for existing prototype methods. Example:

                Ext.define('My.cool.Class', {
                    method1: function() { ... },
                    method2: function() { ... }
                });
                
                var test = new My.cool.Class();
                
                My.cool.Class.createAlias({
                    method3: 'method1',
                    method4: 'method2'
                });
                
                test.method3(); // test.method1()
                
                My.cool.Class.createAlias('method5', 'method3');
                
                test.method5(); // test.method3() -> test.method1()
                

                Available since: 4.0.2

                Parameters

                ( config )privatestatic
                ...

                Available since: 4.1.1

                Parameters

                Get the current class' name in string format. ...

                Get the current class' name in string format.

                Ext.define('My.cool.Class', {
                    constructor: function() {
                        alert(this.self.getName()); // alerts 'My.cool.Class'
                    }
                });
                
                My.cool.Class.getName(); // 'My.cool.Class'
                

                Available since: 4.0.4

                Returns

                ( )deprecatedstatic
                Adds members to class. ...

                Adds members to class.

                Available since: 4.0.2

                This method has been deprecated since 4.1

                Use addMembers instead.

                ( name, mixinClass )chainableprivatestatic
                Used internally by the mixins pre-processor ...

                Used internally by the mixins pre-processor

                Available since: 4.1.1

                Parameters

                ( fn, scope )chainableprivatestatic
                ...

                Available since: 4.1.1

                Parameters

                ( members ) : Ext.Basechainabledeprecatedstatic
                Override members of this class. ...

                Override members of this class. Overridden methods can be invoked via callParent.

                Ext.define('My.Cat', {
                    constructor: function() {
                        alert("I'm a cat!");
                    }
                });
                
                My.Cat.override({
                    constructor: function() {
                        alert("I'm going to be a cat!");
                
                        this.callParent(arguments);
                
                        alert("Meeeeoooowwww");
                    }
                });
                
                var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                                          // alerts "I'm a cat!"
                                          // alerts "Meeeeoooowwww"
                

                As of 4.1, direct use of this method is deprecated. Use Ext.define instead:

                Ext.define('My.CatOverride', {
                    override: 'My.Cat',
                    constructor: function() {
                        alert("I'm going to be a cat!");
                
                        this.callParent(arguments);
                
                        alert("Meeeeoooowwww");
                    }
                });
                

                The above accomplishes the same result but can be managed by the Ext.Loader which can properly order the override and its target class and the build process can determine whether the override is needed based on the required state of the target class (My.Cat).

                Available since: 4.0.2

                This method has been deprecated since 4.1.0

                Use Ext.define instead

                Parameters

                • members : Object

                  The properties to add to this class. This should be specified as an object literal containing one or more properties.

                Returns

                ...

                Available since: 4.1.1