extjs keyMap动态键

r8uurelv  于 2022-11-04  发布在  其他
关注(0)|答案(1)|浏览(178)

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

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

whitzsjs1#

您可以加入Helper函式。
类似这样的东西(我没有测试它,但应该是一个很好的提示。

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

相关问题