PDA

View Full Version : Handling Form Load Failure



fsa3
23 Sep 2009, 5:04 AM
I have a FormPanel that is displayed via a window. In the form panel's beforerender function I load the forms content, if an error occurs I want to show a message and either not show the form or close it. However, since the response to my ajax call is asynchronous I'm not sure that is the right idea.

What is the proper way to not show (or close) a window if the form (contained in the window) fails to load?

Here is a little code of the beforerender event handling that I have right now:


listeners: {
beforerender: function(){
this.form.load({
url:'/A_GetDestComment.jsp',
method:'GET',
success:function(form, action) {
},
failure:function(form, action) {
Ext.MessageBox.alert('Message', 'You must rate this place before you can comment on it.');
dontRender=true;
}
});
}

8 Oct 2009, 7:17 AM
Ideally, you should perform an ajax request *before* the UI is instantiated and built, this way there are no wasted cycles for a failure condition.

fsa3
8 Oct 2009, 7:25 AM
Is there a better event to attach to?

fsa3
14 Oct 2009, 7:06 PM
So I rewrote some of the code, what I found was if I called the load method beforehand I could prevent the dialog from showing but the data wasn't binding to the form. However, if I left it in both places (the before render & before .show even gets called) it works fine - however I'm making two calls instead of one - looks crazy.

Here is the code.


function showEditMsg(destid)
{
var fs = new Ext.FormPanel({
frame: false,
title:'Add / Edit Comment',
labelAlign: 'top',
labelWidth: 0,
id:'editcomment',
waitMsgTarget: true,
url:'A_SetDestCommentJSON.jsp',
header:false,
border:false,
listeners: {
beforerender: function(){
this.form.load({
url:'/A_GetDestCommentJSON.jsp?destid='+destid,
method:'GET',
success:function(form, action) {
editDlg.show();
return true;
},
failure:function(form, action) {
Ext.MessageBox.alert('Message', 'You must rate this place before you can comment on it.');
}
});
}
},
items: [{
name: 'eid',
xtype:'hidden'

},
{
name: 'destid',
xtype:'hidden'

},
{
fieldLabel:'Please enter your comment',
name: 'comment',
id: 'comment',
allowBlank: false,
xtype: 'htmleditor',
enableColors: false,
enableAlignments: false,
width:400

}],
buttons: [{text: 'Submit',
minWidth: 75,
handler: function() {
if (fs.getForm().isValid())
{
fs.getForm().submit({
waitMsg:'Adding comment...',

success: function(form, action) {
// Ext.Msg.alert("Success", 'Comment Updated');
editDlg.close();
},
failure: function(form, action) {
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
Ext.Msg.alert("Failure", "Form fields may not be submitted with invalid values");
break;
case Ext.form.Action.CONNECT_FAILURE:
Ext.Msg.alert("Failure", "Ajax communication failed");
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert("Failure", action.result.msg);
}
}
}
);
}
else
{
Ext.Msg.alert('Error', 'Please Complete the form!');
}
}},
{text: 'Cancel',
minWidth: 75,
handler: function() {editDlg.close()}}]
});
var editDlg = new Ext.Window({
height: 350,
width: 450,
closable: true,
closeAction : 'close',
modal: true,
frame: true,
resizable: false,
title: 'Add/Edit Comment',
layout: 'fit',
items: fs
});
fs.getForm().load({
url:'/A_GetDestCommentJSON.jsp?destid='+destid,
method:'GET',
success:function(form, action) {
editDlg.show();
return true;
},
failure:function(form, action) {
Ext.MessageBox.alert('Message', 'You must rate this place before you can comment on it.');
}
});

}

Please advise on a better way to do this!
Thanks again.