PDA

View Full Version : Submit on enter waitMsg



Artistan
15 Oct 2009, 8:44 AM
This is similar to Animal's (http://www.extjs.com/forum/showthread.php?t=75999) post about submitOnEnter but I have it setup to do that for all forms.

The idea here is what about the waitMsg? Submit on enter does not deal with that because the waitMsg must be part of the options for the Action.

This override allows the waitMsg to be placed on a FormPanel (since its config also is applied to it's BasicForm).

This only allows a generic message for load / submit....
but I believe that is better than nothing. Also could be setup to look at the action type to grab other messages like.. waitLoadMsg, waitSubmitMsg...

Currently I am using


waitMsg :'Processing Request...',


BasicForm override...


Ext.override(Ext.form.BasicForm, {
initEl : function(el){
this.el = Ext.get(el);
this.id = this.el.id || Ext.id();
if(!this.standardSubmit){
this.submitInput = this.el.createChild({
tag: 'input',
type: 'submit',
cls: 'x-hide-offsets',
tabIndex: -1
});
this.submitInput.on("click", function() {
this.submit();
}, this);
this.el.on('submit', this.onSubmit, this);
}
this.el.addClass('x-form');
},
// private
beforeAction : function(action){
var o = action.options;
if(o.waitMsg || this.waitMsg ){
if(this.waitMsgTarget === true){
this.el.mask(o.waitMsg || this.waitMsg , 'x-mask-loading');
}else if(this.waitMsgTarget){
this.waitMsgTarget = Ext.get(this.waitMsgTarget);
this.waitMsgTarget.mask(o.waitMsg || this.waitMsg , 'x-mask-loading');
}else{
Ext.MessageBox.wait(o.waitMsg || this.waitMsg , o.waitTitle || this.waitTitle || 'Please Wait...');
}
}
},
// private
afterAction : function(action, success){
this.activeAction = null;
var o = action.options;
if(o.waitMsg || this.waitMsg ){
if(this.waitMsgTarget === true){
this.el.unmask();
}else if(this.waitMsgTarget){
this.waitMsgTarget.unmask();
}else{
Ext.MessageBox.updateProgress(1);
Ext.MessageBox.hide();
}
}
if(success){
if(o.reset){
this.reset();
}
Ext.callback(o.success, o.scope, [this, action]);
this.fireEvent('actioncomplete', this, action);
}else{
Ext.callback(o.failure, o.scope, [this, action]);
this.fireEvent('actionfailed', this, action);
}
}
});


EXAMPLE...


var win = new Ext.Window({
width : 420,
height : 180,
closable : false,
resizable : false,
draggable : true,
modal : true,
iconCls : 'icn-login',
title : 'Log In',
layout : 'border',
bodyStyle : 'padding:5px;',
items : [
{
id : 'common_login_form',
xtype : 'form',
region : 'center',
border : false,
bodyStyle : "padding: 10px;",
waitMsgTarget: true,
waitMsg :'Processing Request...',
labelWidth : 75,
defaults : { width: 300 },
api: {
// The server-side must mark the submit handler as a 'formHandler'
submit: Ext.bb.mod_Login.authenticate
},
buttons : [
{
id : 'common_login_button',
text : 'LogIn',
iconCls : 'icn-login',
width : 90,
scale : 'medium',
handler: function(x_object,x_action){
var x_form = x_object.findParentByType('form').getForm().submit();
}
}
],
items : [{
xtype : 'textfield',
id : 'common_login_user',
name : 'usern',
fieldLabel : 'Username',
validateOnBlur : true,
allowBlank : false
}, {
xtype : 'textfield',
inputType : 'password',
id : 'common_login_pass',
name : 'passw',
fieldLabel : 'Password',
validateOnBlur : true,
allowBlank : false
}, {
xtype: 'box',
autoEl: 'div',
height: 10
}, {
xtype : 'checkbox',
id : 'common_login_check',
name : 'remeber_me',
boxLabel : '  Remember Me',
width : 200,
listeners: {
render: function() {
Ext.get(Ext.DomQuery.select('#x-form-el-common_login_check input')).set({
qtip: 'This is not recommended for shared computers.'
});
}
}
}],
// Add listeners
listeners: {
render: {
fn:function(x_object,x_event){
x_object.getForm().waitMsgTarget = true;
console.log('note form rendered');
var field = x_object.getForm().findField('common_login_user');
console.log(field);
field.focus(true);
},
delay: 1000
}
}
}
]
});