Ext.data.JsonP.Ext_util_KeyMap({"alternateClassNames":["Ext.KeyMap"],"aliases":{},"enum":null,"parentMixins":[],"tagname":"class","subclasses":[],"extends":"Ext.Base","uses":[],"html":"
Alternate names
Ext.KeyMapHierarchy
Ext.BaseExt.util.KeyMapFiles
Handles mapping key events to handling functions for an element or a Component. One KeyMap can be used for multiple\nactions.
\n\nA KeyMap must be configured with a target as an event source which may be an Element or a Component.
\n\nIf 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\ntarget is a Component.
\n\nThe KeyMap's event handling requires that the first parameter passed is a key event. So if the Component's event\nsignature is different, specify a processEvent configuration which accepts the event's parameters and\nreturns a key event.
\n\nFunctions specified in bindings are called with this signature : (String key, Ext.EventObject e)
(if the\nmatch is a multi-key combination the callback will still be called only once). A KeyMap can also handle a string\nrepresentation of keys. By default KeyMap starts enabled.
Usage:
\n\n// map one key by key code\nvar map = new Ext.util.KeyMap({\n target: \"my-element\",\n key: 13, // or Ext.EventObject.ENTER\n fn: myHandler,\n scope: myObject\n});\n\n// map multiple keys to one action by string\nvar map = new Ext.util.KeyMap({\n target: \"my-element\",\n key: \"a\\r\\n\\t\",\n fn: myHandler,\n scope: myObject\n});\n\n// map multiple keys to multiple actions by strings and array of codes\nvar map = new Ext.util.KeyMap({\n target: \"my-element\",\n binding: [{\n key: [10,13],\n fn: function(){ alert(\"Return was pressed\"); }\n }, {\n key: \"abc\",\n fn: function(){ alert('a, b or c was pressed'); }\n }, {\n key: \"\\t\",\n ctrl:true,\n shift:true,\n fn: function(){ alert('Control + shift + tab was pressed.'); }\n }]\n});\n
\n\nSince 4.1.0, KeyMaps can bind to Components and process key-based events fired by Components.
\n\nTo bind to a Component, use the single parameter form of constructor and include the Component event name\nto listen for, and a processEvent
implementation which returns the key event for further processing by\nthe KeyMap:
var map = new Ext.util.KeyMap({\n target: myGridView,\n eventName: 'itemkeydown',\n processEvent: function(view, record, node, index, event) {\n\n // Load the event with the extra information needed by the mappings\n event.view = view;\n event.store = view.getStore();\n event.record = record;\n event.index = index;\n return event;\n },\n binding: {\n key: Ext.EventObject.DELETE,\n fn: function(keyCode, e) {\n e.store.remove(e.record);\n\n // Attempt to select the record that's now in its place\n e.view.getSelectionModel().select(e.index);\n e.view.el.focus();\n }\n }\n});\n
\nEither a single object describing a handling function for s specified key (or set of keys), or\nan array of such objects.
\nA single keycode or an array of keycodes to handle
\nTrue to handle key only when shift is pressed, False to handle the\n key only when shift is not pressed (defaults to undefined)
\nTrue to handle key only when ctrl is pressed, False to handle the\n key only when ctrl is not pressed (defaults to undefined)
\nTrue to handle key only when alt is pressed, False to handle the key\n only when alt is not pressed (defaults to undefined)
\nThe function to call when KeyMap finds the expected key combination
\nAlias of handler (for backwards-compatibility)
\nThe scope of the callback function
\nA default action to apply to the event. Possible values\n are: stopEvent, stopPropagation, preventDefault. If no value is set no action is performed.
\nThe event to listen for to pick up key events.
\nDefaults to: 'keydown'
Configure this as true
if there are any input fields within the target, and this KeyNav\nshould not process events from input fields, (<input>, <textarea> and elements with
contentEditable=\"true\"`)
Defaults to: false
An optional event processor function which accepts the argument list provided by the\nconfigured event of the target, and returns a keyEvent for processing by the KeyMap.
\n\nThis may be useful when the target is a Component with s complex event signature, where the event is not\nthe first parameter. Extra information from the event arguments may be injected into the event for use by the handler\nfunctions before returning it.
\nThe scope (this
context) in which the processEvent method is executed.
Defaults to: this
Get the reference to the current class from which this object was instantiated. Unlike statics,\nthis.self
is scope-dependent and it's meant to be used for dynamic inheritance. See statics\nfor a detailed comparison
Ext.define('My.Cat', {\n statics: {\n speciesName: 'Cat' // My.Cat.speciesName = 'Cat'\n },\n\n constructor: function() {\n alert(this.self.speciesName); // dependent on 'this'\n },\n\n clone: function() {\n return new this.self();\n }\n});\n\n\nExt.define('My.SnowLeopard', {\n extend: 'My.Cat',\n statics: {\n speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'\n }\n});\n\nvar cat = new My.Cat(); // alerts 'Cat'\nvar snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard'\n\nvar clone = snowLeopard.clone();\nalert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'\n
\nAdd a new binding to this KeyMap.
\n\nUsage:
\n\n// Create a KeyMap\nvar map = new Ext.util.KeyMap(document, {\n key: Ext.EventObject.ENTER,\n fn: handleKey,\n scope: this\n});\n\n//Add a new binding to the existing KeyMap later\nmap.addBinding({\n key: 'abc',\n shift: true,\n fn: handleKey,\n scope: this\n});\n
\nA single KeyMap config or an array of configs.\nThe following config object properties are supported:
\nA single keycode or an array of keycodes to handle.
\nTrue to handle key only when shift is pressed,\nFalse to handle the keyonly when shift is not pressed (defaults to undefined).
\nTrue to handle key only when ctrl is pressed,\nFalse to handle the key only when ctrl is not pressed (defaults to undefined).
\nTrue to handle key only when alt is pressed,\nFalse to handle the key only when alt is not pressed (defaults to undefined).
\nThe function to call when KeyMap finds the\nexpected key combination.
\nAlias of handler (for backwards-compatibility).
\nThe scope of the callback function.
\nA default action to apply to the event.\nPossible values are: stopEvent, stopPropagation, preventDefault. If no value is\nset no action is performed..
\nCall the original method that was previously overridden with override
\n\nExt.define('My.Cat', {\n constructor: function() {\n alert(\"I'm a cat!\");\n }\n});\n\nMy.Cat.override({\n constructor: function() {\n alert(\"I'm going to be a cat!\");\n\n this.callOverridden();\n\n alert(\"Meeeeoooowwww\");\n }\n});\n\nvar kitty = new My.Cat(); // alerts \"I'm going to be a cat!\"\n // alerts \"I'm a cat!\"\n // alerts \"Meeeeoooowwww\"\n
\n This method has been deprecated
\nas of 4.1. Use callParent instead.
\n\nThe arguments, either an array or the arguments
object\nfrom the current method, for example: this.callOverridden(arguments)
Returns the result of calling the overridden method
\nCall the \"parent\" method of the current method. That is the method previously\noverridden by derivation or by an override (see Ext.define).
\n\n Ext.define('My.Base', {\n constructor: function (x) {\n this.x = x;\n },\n\n statics: {\n method: function (x) {\n return x;\n }\n }\n });\n\n Ext.define('My.Derived', {\n extend: 'My.Base',\n\n constructor: function () {\n this.callParent([21]);\n }\n });\n\n var obj = new My.Derived();\n\n alert(obj.x); // alerts 21\n
\n\nThis can be used with an override as follows:
\n\n Ext.define('My.DerivedOverride', {\n override: 'My.Derived',\n\n constructor: function (x) {\n this.callParent([x*2]); // calls original My.Derived constructor\n }\n });\n\n var obj = new My.Derived();\n\n alert(obj.x); // now alerts 42\n
\n\nThis also works with static methods.
\n\n Ext.define('My.Derived2', {\n extend: 'My.Base',\n\n statics: {\n method: function (x) {\n return this.callParent([x*2]); // calls My.Base.method\n }\n }\n });\n\n alert(My.Base.method(10); // alerts 10\n alert(My.Derived2.method(10); // alerts 20\n
\n\nLastly, it also works with overridden static methods.
\n\n Ext.define('My.Derived2Override', {\n override: 'My.Derived2',\n\n statics: {\n method: function (x) {\n return this.callParent([x*2]); // calls My.Derived2.method\n }\n }\n });\n\n alert(My.Derived2.method(10); // now alerts 40\n
\n\nTo override a method and replace it and also call the superclass method, use\ncallSuper. This is often done to patch a method to fix a bug.
\nThe arguments, either an array or the arguments
object\nfrom the current method, for example: this.callParent(arguments)
Returns the result of calling the parent method
\nThis method is used by an override to call the superclass method but bypass any\noverridden method. This is often done to \"patch\" a method that contains a bug\nbut for whatever reason cannot be fixed directly.
\n\nConsider:
\n\n Ext.define('Ext.some.Class', {\n method: function () {\n console.log('Good');\n }\n });\n\n Ext.define('Ext.some.DerivedClass', {\n method: function () {\n console.log('Bad');\n\n // ... logic but with a bug ...\n\n this.callParent();\n }\n });\n
\n\nTo patch the bug in DerivedClass.method
, the typical solution is to create an\noverride:
Ext.define('App.paches.DerivedClass', {\n override: 'Ext.some.DerivedClass',\n\n method: function () {\n console.log('Fixed');\n\n // ... logic but with bug fixed ...\n\n this.callSuper();\n }\n });\n
\n\nThe patch method cannot use callParent
to call the superclass method
since\nthat would call the overridden method containing the bug. In other words, the\nabove patch would only produce \"Fixed\" then \"Good\" in the console log, whereas,\nusing callParent
would produce \"Fixed\" then \"Bad\" then \"Good\".
The arguments, either an array or the arguments
object\nfrom the current method, for example: this.callSuper(arguments)
Returns the result of calling the superclass method
\nCheck if the modifiers on the event match those on the binding
\nTrue if the event matches the binding
\nInitialize configuration for this class. a typical example:
\n\nExt.define('My.awesome.Class', {\n // The default config\n config: {\n name: 'Awesome',\n isAwesome: true\n },\n\n constructor: function(config) {\n this.initConfig(config);\n }\n});\n\nvar awesome = new My.awesome.Class({\n name: 'Super Awesome'\n});\n\nalert(awesome.getName()); // 'Super Awesome'\n
\nthis
\nOld constructor signature
\nThe element or its ID, or Component to bind to
\nThe binding (see addBinding)
\nThe event to bind to
\nDefaults to: "keydown"
Shorthand for adding a single key listener.
\nEither the numeric key code, array of key codes or an object with the\nfollowing options: {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
The function to call
\nThe scope (this
reference) in which the function is executed.\nDefaults to the browser window.
Process a particular binding and fire the handler if necessary.
\nThe binding information
\nGet the reference to the class from which this object was instantiated. Note that unlike self,\nthis.statics()
is scope-independent and it always returns the class from which it was called, regardless of what\nthis
points to during run-time
Ext.define('My.Cat', {\n statics: {\n totalCreated: 0,\n speciesName: 'Cat' // My.Cat.speciesName = 'Cat'\n },\n\n constructor: function() {\n var statics = this.statics();\n\n alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to\n // equivalent to: My.Cat.speciesName\n\n alert(this.self.speciesName); // dependent on 'this'\n\n statics.totalCreated++;\n },\n\n clone: function() {\n var cloned = new this.self; // dependent on 'this'\n\n cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName\n\n return cloned;\n }\n});\n\n\nExt.define('My.SnowLeopard', {\n extend: 'My.Cat',\n\n statics: {\n speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'\n },\n\n constructor: function() {\n this.callParent();\n }\n});\n\nvar cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat'\n\nvar snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'\n\nvar clone = snowLeopard.clone();\nalert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'\nalert(clone.groupName); // alerts 'Cat'\n\nalert(My.Cat.totalCreated); // alerts 3\n
\nShorthand for removing a single key listener.
\nEither the numeric key code, array of key codes or an object with the\nfollowing options: {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
The function to call
\nThe scope (this
reference) in which the function is executed.\nDefaults to the browser window.
Add methods / properties to the prototype of this class.
\n\nExt.define('My.awesome.Cat', {\n constructor: function() {\n ...\n }\n});\n\n My.awesome.Cat.addMembers({\n meow: function() {\n alert('Meowww...');\n }\n });\n\n var kitty = new My.awesome.Cat;\n kitty.meow();\n
\nAdd / override static properties of this class.
\n\nExt.define('My.cool.Class', {\n ...\n});\n\nMy.cool.Class.addStatics({\n someProperty: 'someValue', // My.cool.Class.someProperty = 'someValue'\n method1: function() { ... }, // My.cool.Class.method1 = function() { ... };\n method2: function() { ... } // My.cool.Class.method2 = function() { ... };\n});\n
\nthis
\nBorrow another class' members to the prototype of this class.
\n\nExt.define('Bank', {\n money: '$$$',\n printMoney: function() {\n alert('$$$$$$$');\n }\n});\n\nExt.define('Thief', {\n ...\n});\n\nThief.borrow(Bank, ['money', 'printMoney']);\n\nvar steve = new Thief();\n\nalert(steve.money); // alerts '$$$'\nsteve.printMoney(); // alerts '$$$$$$$'\n
\nThe class to borrow members from
\nThe names of the members to borrow
\nthis
\nCreate a new instance of this Class.
\n\nExt.define('My.cool.Class', {\n ...\n});\n\nMy.cool.Class.create({\n someConfig: true\n});\n
\n\nAll parameters are passed to the constructor of the class.
\nthe created instance.
\nCreate aliases for existing prototype methods. Example:
\n\nExt.define('My.cool.Class', {\n method1: function() { ... },\n method2: function() { ... }\n});\n\nvar test = new My.cool.Class();\n\nMy.cool.Class.createAlias({\n method3: 'method1',\n method4: 'method2'\n});\n\ntest.method3(); // test.method1()\n\nMy.cool.Class.createAlias('method5', 'method3');\n\ntest.method5(); // test.method3() -> test.method1()\n
\nThe new method name, or an object to set multiple aliases. See\nflexSetter
\nThe original method name
\nGet the current class' name in string format.
\n\nExt.define('My.cool.Class', {\n constructor: function() {\n alert(this.self.getName()); // alerts 'My.cool.Class'\n }\n});\n\nMy.cool.Class.getName(); // 'My.cool.Class'\n
\nclassName
\nAdds members to class.
\nThis method has been deprecated since 4.1
\nUse addMembers instead.
\n\nOverride members of this class. Overridden methods can be invoked via\ncallParent.
\n\nExt.define('My.Cat', {\n constructor: function() {\n alert(\"I'm a cat!\");\n }\n});\n\nMy.Cat.override({\n constructor: function() {\n alert(\"I'm going to be a cat!\");\n\n this.callParent(arguments);\n\n alert(\"Meeeeoooowwww\");\n }\n});\n\nvar kitty = new My.Cat(); // alerts \"I'm going to be a cat!\"\n // alerts \"I'm a cat!\"\n // alerts \"Meeeeoooowwww\"\n
\n\nAs of 4.1, direct use of this method is deprecated. Use Ext.define\ninstead:
\n\nExt.define('My.CatOverride', {\n override: 'My.Cat',\n constructor: function() {\n alert(\"I'm going to be a cat!\");\n\n this.callParent(arguments);\n\n alert(\"Meeeeoooowwww\");\n }\n});\n
\n\nThe above accomplishes the same result but can be managed by the Ext.Loader\nwhich can properly order the override and its target class and the build process\ncan determine whether the override is needed based on the required state of the\ntarget class (My.Cat).
\nThis method has been deprecated since 4.1.0
\nUse Ext.define instead
\n\nThe properties to add to this class. This should be\nspecified as an object literal containing one or more properties.
\nthis class
\n