CODEWITHSUNDEEP
javascriptextjsextjs-mvcextjs5
Manuel
Manuel

Reputation: 9522

ExtJS5 How to let keymap call viewController function?

I was wondering how to call a controller function from a keymaps in extjs 5?

The following code in the view is working to bind the keys to a an anonymous function, however not to a controller function. The function is also called by the button, and is working. How do I set the scope correctly that it is calling the controller function?

Ext.define("MyApp.view.users.List",{
    extend: 'Ext.grid.Panel',
    alias: 'widget.usersList',
    controller: 'users-list',
    listeners: {
        scope: 'controller',
        afterrender: function(window, options) {
            this.keyNav = new Ext.util.KeyMap ({
                target:window.el,
                binding: [
                    {key:"s", ctrl:true, fn: function(){alert("hallo shortkey");}},
                    {key:"c", ctrl:true, fn: "newUserFn"},
                ],
                scope:'controller'
            });
        }
    },
    tbar: [
        {
            itemId: 'users-list-btn-new',
            iconCls: 'icon-add',
            text: 'New User',
            handler: 'newUserFn'
        }
    ]
});

Upvotes: 0

Views: 561

Answers (1)

Lesley.Oakey
Lesley.Oakey

Reputation: 354

I had similar troubles with scope on key press events. I'm not using a KeyMap as you are but the event logic is still relevant.

The following assumes a controller with method "saveNewComponent" that you want to call. You must fire the view event "callSave" which is being listened to in the view to correctly forward to the controller.

Ext.define('teams.view.component.FormPanel', {
    extend: 'Ext.form.Panel',
    controller: "FormPanelController",
    listeners: {
        callSave: "saveNewComponent"
    },
    beforeShow: function(){     
        var me = this;
        me.body.dom.addEventListener("keydown", Ext.bind(onKeyDown, this), false);
        function onKeyDown(e) {
            //Listen for Ctrl+S
            if (e.ctrlKey && e.which === 83){
                e.preventDefault(); 
                me.fireEvent("callSave");
                return false;
            }
        }
    },
    ....
}

I tried many ways of achieving this, this this solution was the only one that had the correct context when actually inside the controller (ie this var was correct)

Upvotes: 1

Related Questions