How does Form lose focus?

[miles.zhong@oocl.com]

I'm working on Ext 3.3.
When our form needs monitor 'enter' key event to submit form, the from will be submitted repeatedly if I click enter key more than once.
This behavior will hurt the data version controll.
I have an idea that if the form loses the focus after it reply the first time 'enter' event, the second 'enter' event won't be monitored until you focus the form again.
So, could you please share how to lose the form's focus manually or other better solution?
Thanks!
Demo below:

    Ext.onReady(function() {        
                Ext.QuickTips.init();
        var simple = new Ext.FormPanel({
            labelWidth : 75,
            frame : true,
            title : 'Simple Form',
            bodyStyle : 'padding:5px 5px 0',
            width : 350,
            renderTo : 'form1',
            keys : [ {
                key : Ext.EventObject.ENTER,
                fn : Ext.createDelegate(function() {
                    cmp.focus(); // if the cmp is editable like textfield or combo, it can work, while label or other form can't.
                    console.log('hello world');
                }, this)
            } ],
            defaults : {
                width : 230
            },
            defaultType : 'textfield',
            items : [ {
                fieldLabel : 'First Name',
                name : 'first'
            }, {
                fieldLabel : 'Last Name',
                name : 'last'
            }, {
                fieldLabel : 'Company',
                name : 'company'
            } ],


            buttons : [ {
                text : 'Save'
            }, {
                text : 'Cancel'
            } ]
        });
        var cmp = new Ext.form.Label({text:'label1'}); 
        var simple1 = new Ext.FormPanel({
            labelWidth : 75, // label settings here cascade unless overridden
            frame : true,
            title : 'Simple Form',
            bodyStyle : 'padding:5px 5px 0',
            width : 350,
            renderTo : 'form2',
            defaults : {
                width : 230
            },
            items : [ cmp]
        });
    });

[miles.zhong@oocl.com]

form.blur() can't work either.

[miles.zhong@oocl.com]

One way is that blur all the editable components.

									for (var i = 0; i < document											.getElementsByTagName('input').length; i++) {
										document.getElementsByTagName('input')[i]
												.blur();
									}

But, I don't think it is the best way

[willigogs]

Why not just have a formSubmitted flag which is initially set to false? On submit of the form set this to true, and before any of your form submit logic have a simple:

if(formSubmitted == false) {
//Do submit logic
}

To allow the form to be submitted once more, simply return the flag to false on completion of the submit logic.

Alternatively, you could mask your form during submit to not allow any further submits?

[miles.zhong@oocl.com]

Why not just have a formSubmitted flag which is initially set to false? On submit of the form set this to true, and before any of your form submit logic have a simple:

if(formSubmitted == false) {
//Do submit logic
}

To allow the form to be submitted once more, simply return the flag to false on completion of the submit logic.

Alternatively, you could mask your form during submit to not allow any further submits?

1.I want to make it as a common function and submit function may have lots of exits. Your 1st solution has to ask all developers change the related code and easily miss some places.
2.Mask can't stop key event monitor of form.

[willigogs]

1.I want to make it as a common function and submit function may have lots of exits. Your 1st solution has to ask all developers change the related code and easily miss some places.

Not if you override the formpanel, and make this part of the global submit function.