This is the short post that I want to share, cause last year I had created form in Extjs and submitted using ENTER key event so I want to share that here the simple code in Extjs form to enabling ENTER key event, but using this code your mouse cursor should be focused on one of the field inside the form, this is very simple so I don’t think I need to provide the downloadable source code, here it goes:

Ext.onReady(function(){
    var formLogin = new Ext.FormPanel({
        frame: false, border: false, buttonAlign: 'center',
        url: BASE_URL + 'user/extjs_login', method: 'POST',
        id: 'frmLogin',
        items: [{
            xtype: 'textfield',
            fieldLabel: 'Username',
            id:'fldusername',
            name: 'username',
            allowBlank: false
        }, {
            xtype: 'textfield',
            fieldLabel: 'Password',
            id:'fldpassword',
            name: 'password',
            allowBlank: false,
            inputType: 'password'
        }],
        buttons: [
            { text: 'Login' },
            { text: 'Reset', handler: function() {
                    formLogin.getForm().reset();
                }
            }
        ],
        keys: [
            { key: [Ext.EventObject.ENTER], handler: function() {
                    Ext.Msg.alert("Alert","Enter Key Event !");
                }
            }
        ]
    });

    var winLogin = new Ext.Window({
        title: 'Extjs Enter Key Event', layout: 'fit',
        width: 340, height: 140, resizable: false,
        closable: false, items: [formLogin]
    });

    winLogin.show();
});

As you can see on the code above just add the config "keys" property and use the event key "Ext.EventObject.ENTER", that's all.

This entry was posted on Friday, June 4th, 2010 at 8:44 pm and is filed under Extjs. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.