Extjs : Form Submit With Enter Key Event

June 4th, 2010 by aditia rahman / 21 Comments  

     

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.

        submit to reddit Delicious

21 Comments Leave a Comment Subscribe RSS

Leave a Comment