CODEWITHSUNDEEP
model-view-controllerextjskeymapping
Scott Sz
Scott Sz

Reputation: 3998

ExtJS 4 how to properly create a KeyMap for a window when using MVC

I have a simple ExtJS application that is written MVC style (much of my information from here).

My application creates a viewport, and has a view with a form, some fields and a button.

The application has a controller with a 'loginButtonClick" function, and the controller watches the click event with a:

this.control({
 'loginwindow button[action=save]': {
   click: this.loginButtonClick
 }
}

That works great, but now when the login window is showing, I want the enter key to also execute the loginButtonClick method.

I have tried all kinds of things, but the basic issue I am having is WHERE to put the code for creating the keymap, and how to bind it to the proper instances.

For example, if I create the keymap in the controller (which is my preference), I need to get the specific view instance for that controller (I might have multiple windows open of the same kind).

So, How would you create a key map (or?) from within a controller for it's view (window), calling a local method (this.loginButtonClick) when the enter key is pressed?

Upvotes: 2

Views: 3714

Answers (3)

Sasha Brocato
Sasha Brocato

Reputation: 673

What you can do is bind the code that initializes the keyMap to the login window afterrender event like this:

this.control{(
   'loginwindow' : {
      afterrender: this.initializeKeyMap
 }

Then make a function that sets up the keyNav:

initializeKeyMap: function(window, options) {
   this.keyNav = Ext.create('Ext.util.KeyNav', window.el, {
         enter: this.loginButtonClick,
         scope: this
   });           
}

Now when the dialog is loaded if the user presses the Enter key, it should execute your function.

Upvotes: 2

netemp
netemp

Reputation: 4185

You can achieve this by adding the following listeners to your text/password fields in the form

listeners: {
    specialkey: function(field, e){
        if (e.getKey() == e.ENTER) {
            var form = this.up('form').getForm();
            submitLoginForm(form);
        }
    }
}

Here 'form' is your form and 'submitLoginForm' is the function called at form submit which I guess is loginButtonClick in your case.

Hope this helps.

Upvotes: 0

Andrey Selitsky
Andrey Selitsky

Reputation: 2604

You could setup all these things on your window render event. So when it is rendered you add an eventlistener for the enter key, and in the handler you call programatically click on the login button.

Upvotes: 0

Related Questions