extjs keyMap 动态键

Question

您好，我已经实现了这个，我希望键是基于函数返回的动态的。假设我在控制器中有一个名为“returnKeyFront”的函数，它返回“F”键。然后我想把它应用到第一个元素 F。所以不是写 F，而是返回那个键的函数。不知道如何实现。我正在使用来自 extJS 的 keyMap 和 coffescript。谢了

  keyMap: 
   F: 
    handler: "onCamerasHotkeyFront"      
   B: 
    handler: "onCamerasHotkeyBack"    

Answer 1

你可以添加一个辅助函数。

类似这样的东西（我没有测试过，但应该是一个很好的提示。

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;
    }
});