ExtJs 4: submit form on enter

It’s a shame that such a powerful framework as ExtJs 4 does not have this feature built-in.

function submitOnEnter(field, event) {
	if (event.getKey() == event.ENTER) {
		field.up('form').getForm().submit();
	}
}

var form = Ext.create('Ext.form.Panel', {
	...
	defaults: {
		...
		listeners: {
			specialkey: submitOnEnter
		}
	},
	submit: function() {
		// Your submit code
	}
});

The above code automatically adds the listener to every field in the form. Alternatively you may do it yourself:

items: [{
	fieldLabel: 'Email',
	name: 'email',
	vtype: 'email',
	maxLength: 64,			
	allowBlank: false,
	listeners: {
		specialkey: submitOnEnter
	}
}]

See it all in action.

This entry was posted in Programming and tagged , . Bookmark the permalink.

7 Responses to ExtJs 4: submit form on enter

  1. shaswath says:

    hello thanks for posting

  2. Francis says:

    It would be too powerful if it did.

  3. That’s why I hate ExtJS. HTML native forms does this automatically, while in ExtJS you should write code, and a pretty dirty code.

    • Mahmoud says:

      Don’t hate it! Tell me what will you do if you want to stop auto submit behavior in Html pure forms? you need to write some JS codes to stop it. In lots of usages (especially in enterprise applications) you don’t need this auto-submit behavior.

  4. MoneyOnlinez says:

    It works man, save my time! Now I didn’t need to put listeners in every field.

  5. anarbek says:

    function submitOnEnter(field, event) {
    if (event.getCharCode() == Ext.EventObject.ENTER) {
    var myBtn = Ext.getCmp(‘search_button’);
    myBtn.fireEvent(‘click’, myBtn);
    }
    }

    and in panel

    {
    xtype: ‘combo’,
    fieldLabel: ‘My Label’,
    name: ‘status’,
    store: ‘MyDropdownStore’,
    displayField: ‘label’,
    valueField: ‘id’,
    editable: false,
    listeners: {
    specialkey: submitOnEnter
    }
    },

  6. You’re right; it must be a built-in feature.. By the way another solution for who uses MVC architecture is adding listener to all textfields in the form using query manager.

    this.control({
    ‘myform textfield’: {
    specialkey: function (field, e) {
    if (e.getKey() == e.ENTER) {
    field.up(‘form’).getForm().submit();
    }
    }
    }
    });

Leave a Reply

Your email address will not be published. Required fields are marked *