extjs keyMap dynamic keys - extjs

Question

Hi I have this implemented and I want the keys to be dynamic based on function return. Lets say I have function in controller called "returnKeyFront" which returns "F" key. I then want to take it and apply it for first element F. So instead of writing F there would be that function which returns that key. No idea how to implement that. I am using keyMap from extJS with coffescript. THX
keyMap:
F:
handler: "onCamerasHotkeyFront"
B:
handler: "onCamerasHotkeyBack"

Answer 1

You can add a helper function.
Something like this (I did not test it, but should be a pretty good hint.
Ext.define('MyApp.KeyChain', {
singleton: true,
/**
* holds the current keymap appwide
* #private
*/
_keymap: null,
/**
* initialize with a base defintion
*/
initKeyChain() {
const keyChain = this.definition;
this.updateKeyMap();
},
/**
* base definition. You can also set it to null
* if you want to start blank
*
* #private
*/
definition: {
CameraFront: {
key: 'f',
alt: true,
fn: 'onCamerasHotkeyFront',
scope: this // typically you want to either set the fn and/or scope
},
CameraBack: {
key: 'f',
alt: true,
fn: 'onCamerasHotkeyBack',
scope: this // typically you want to either set the fn and/or scope
},
},
/**
* changeKey
* to add or change a definition. You can also init via changeKey
* see this.defintion for examples on how keyDefinition should look like
*
* #arg {string} type e.g. 'CameraFront'
* #arg {object} keyDefinition
* #arg {string} keyDefinition.key
* #arg {boolean} [keyDefinition.alt]
* #arg {function|string} keyDefinition.fn
* #arg {scope} [keyDefinition.scope]
*/
changeKey(type, keyDefinition) {
if(!keyDefinition.scope) keyDefinition.scope = this;
if(typeof keyDefinition.fn === 'string') keyDefinition.fn = scope[definition.fn];
MyApp._definition[type] = keyDefinition;
this.updateKeyMap();
},
/**
* updateKeyMap
*
* #private
*/
updateKeyMap() {
if(this._keymap) this._keymap.destroy();
const newBinding = this.createBindings();
this._keymap = new Ext.util.KeyMap({
target: Ext.getBody(),
binding: newBindings
});
},
/**
* createBinding
*
* #private
*/
createBinding() {
const def = this.definition;
let bindings = [];
Ext.Object.each(def, function(key, value) {
bindings.push({value});
});
return bindings;
}
});