1. #1
    Ext User
    Join Date
    Jan 2009
    Posts
    61
    Vote Rating
    2
    venu is on a distinguished road

      0  

    Default How to capture ENTER and ESC key to submit form

    How to capture ENTER and ESC key to submit form


    I am trying to capture ENTER and ESC keys in FormPanel to Submit / Cancel the form.
    'ESC' is working fine, but when i click on 'ENTER' button, the browser is refreshing instead invoking the method called in the click event of the button. Highlighted the related code in RED color.

    Here is my code
    -------------------
    Code:
    AddItemWindow = function() {
    
    	this.label = new Ext.form.TextField({
    		id			: 'id_AddItemWindow_label',
    		name		: 'label',
    		width		: 200,
    		maxLength	: 25,
    		fieldLabel	: 'Label',
    		invalidText :'Label is mandatory',
    		tabIndex	: 1,
    		enableKeyEvents: true,
    		scope: this
    	});
    
    	this.formPanel = new Ext.form.FormPanel({
    	method : 'POST',
            baseCls: 'x-plain',
            labelWidth: 130,
            width	: 330,
            url:  hostaddress+'/addItem.rap',
    	onSubmit: Ext.emptyFn,
            items: [
                this.label
    	],
    	
            keys: [{
                    key: [Ext.EventObject.ESC], fn: function(){
    		    Ext.getCmp('id_AddItemWindow_onCancel').fireEvent('click');
                    }
                },{
                    key: [Ext.EventObject.ENTER], fn: function(){
                        Ext.ComponentMgr.get('id_AddItemWindow_onAdd').fireEvent('click');
                    }
            }]
        });
    	
    	this.items = [this.formPanel];
    	
    	AddItemWindow.superclass.constructor.call(this, {
    		id		: 'id_addItemWindow',
    		title	: ' New Item',
    		width	: 380,
    		height	: 300,
    		closeAction: 'hide',
    
    		buttons:[{
    		   id: 'id_AddItemWindow_onAdd',
                       text	: 'Save & Close',
                       handler	: this.onAdd,
                       scope	: this,
    		   listeners: {
    			click: function(field, e) {
                                    // the below method is not called for ENTER key????
    				this.onAdd
    			}
    		  }
            },{
    		  id: 'id_AddItemWindow_onCancel',
                      text: 'Cancel',
                      handler: this.hide.createDelegate(this, []),
    		  listeners : {
    			click : function() {
    				Ext.getCmp('id_addItemWindow').hide();
    			}
    		  }
            }]
           });
    	
    };
    
    Ext.extend(AddItemWindow, Ext.Window, {
    	
    	onAdd: function() {
    		if(this.formPanel.getForm().isValid()){	
    			this.formPanel.getForm().getEl().dom.action = this.formPanel.url;
    			this.formPanel.el.mask("Please wait while saving the data", "x-mask-loading");
    				this.formPanel.form.submit({
    					failure: this.submitFailed,
    					success: this.submitSuccessful,
    					scope: this
    			});
    		} 
        },
    	
    	submitSuccessful: function(form, action) {	
    		this.hide();
        },
    	
    	submitFailed: function(form, action) {
    		Ext.MessageBox.alert('Error',action.result.message);
    	},
    });
    Can anyone correct my code?

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I've had a Feature Request out for a submitOnEnter config option for a FormPanel for a while now. It's such a common requirement, I don't know when they don't add it.

    Here's the fix:

    Code:
    Ext.override(Ext.form.BasicForm, {
        /**
         * @cfg {Object/Boolean} submitOnEnter
         * If set, this causes the form to be submitted when the Enter key is pressed when an item
         * of this form is focused. If the value of the <code>submitOnEnter</code> config is an object,
         * it is passed as the options parameter to the {@link #submit} method.
         */
    
        initEl : function(el){
            this.el = Ext.get(el);
            this.id = this.el.id || Ext.id();
    
    //      If submitOnEnter wanted, add a non-focussable <input type="submit">
            if (this.submitOnEnter) {
                this.submitInput = this.el.createChild({
                    tag: 'input',
                    type: 'submit',
                    cls: 'x-hide-offsets',
                    tabIndex: -1
                });
            }
    
            if(!this.standardSubmit){
    //          Trap the submit input and invoke the submit method
                if (this.submitInput) {
                    this.submitInput.on("click", function() {
                        this.submit(Ext.isObject(this.submitOnEnter) ? this.submitOnEnter : undefined);
                    }, this);
                }
                this.el.on('submit', this.onSubmit, this);
            }
            this.el.addClass('x-form');
        }
    });

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    ESC is not standard to submit forms. I don't think that's a good UI design.

  4. #4
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,664
    Vote Rating
    7
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    He wanted to use ESC for cancel, which is common behaviour. But what does cancel means in Form, reset?
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  5. #5
    Ext User
    Join Date
    Jan 2009
    Posts
    61
    Vote Rating
    2
    venu is on a distinguished road

      0  

    Default


    In my application, cancel means hide or close the Window that contains the FormPanel.

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Quote Originally Posted by venu View Post
    In my application, cancel means hide or close the Window that contains the FormPanel.
    That's handled automatically by Ext. ESC closes the Window (close meaning whatever you set closeAction to)

  7. #7
    Ext JS Premium Member
    Join Date
    Sep 2009
    Posts
    4
    Vote Rating
    0
    fwhitlock is on a distinguished road

      0  

    Default IE issues

    IE issues


    I have tried the solution Animal posted above and for me it works in firefox, chrome, and safari. I have not gotten it to work in IE 6,7, or 8. Before I dig into this does Animal or anyone else know what the problem is?

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Looks like IE just doesn't process the enter key as activating a submit input.

  9. #9
    Ext User
    Join Date
    Sep 2007
    Posts
    67
    Vote Rating
    0
    Air_Mike is on a distinguished road

      0  

    Default


    Hi,

    this is great override, but it doesn't work on IE.

    I found out that hidden input element (type submit) was given class x-hide-offsets which has property visibility: hidden. That property (for some unknown reason) influence IE in the way that it ignores that submit element.

    I gave that element different class which doesn't have that property (all other properties are there like big negative offsets) and now it work in IE.

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Good catch there. I'll update the FR to just use negative offsets rather than that class.