PDA

View Full Version : [Newbie Question] Displaying JSON data after form submission



marinear212
31 Jan 2011, 1:06 PM
Hi. I'm trying to make a simple form submission piece.

I'm trying to submit a form through Ajax Request, then receives the data from the server and display the data on the panel that originally had form...

I am getting the JSON data fine, but I am not sure how to display this data on the panel.
This is quite basic thing but I can't seem to make it work.
I tried using XTemplate overwrite but it didn't work. Maybe I am missing something or using them wrong..
Can anyone help me?




Ext.setup({
onReady: function() {
Ext.regModel('input', {
field: [
{ name: 'FirstName', type: 'string' },
{ name: 'LastName', type: 'string' },
{ name: 'DateBirth', type: 'string' },
{ name: 'Email', type: 'string' }
],
validations: [
{ type: 'presence', name: 'FirstName', message: 'First Name is required' },
{ type: 'presence', name: 'LastName', message: 'Last Name is required' },
{ type: 'presence', name: 'DateBirth', message: 'Date of Birth is required' },
{ type: 'format', name: 'DateBirth', matcher: /^[0-9]{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])/, message: 'Wrong format (yyyy-mm-dd)' },
{ type: 'format', name: 'Email', matcher: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/, message: 'Wrong format' }
]
});


var infoTpl = new Ext.XTemplate([
'<tpl for=".">',
'<div class="data">',
'Hello, {FirstName} {LastName} <br>',
'Your birth day is {DateBirth} and you are {Age} years old',
'</div>',
'</tpl>'
]);


var formBase = new Ext.form.FormPanel({
scroll: 'vertical',
standardSubmit: false,
items: [
{ xtype: 'fieldset',
title: 'Info',
name: 'Info',
items: [
{
xtype: 'textfield',
name: 'FirstName',
label: 'First Name',
required: true
}, {
xtype: 'textfield',
name: 'LastName',
label: 'Last Name',
required: true
}, {
xtype: 'datepickerfield',
name: 'DateBirth',
label: 'Date of Birth',
picker: { yearFrom: 1900 },
required: true
}, {
xtype: 'emailfield',
name: 'Email',
label: 'Email',
placeHolder: 'email@email.com'
}
]
}
],
dockedItems: [
{ xtype: 'toolbar',
dock: 'bottom',
items: [
{ text: 'Reset',
handler: function() {
form.reset();
}
}, {
xtype: 'spacer'
}, {
text: 'Submit',
ui: 'confirm',
handler: function() {
Ext.Ajax.request({
url: '/Home/ReturnJson',
method: 'post',
params: { fName: formBase.getValues().FirstName, lName: formBase.getValues().LastName, dBirth: formBase.getValues().DateBirth, eml: formBase.getValues().Email },
success: function(res, opts) {
var jsonReturn = res.reponseText;
infoTpl.overwrite(panel.body, jsonReturn);
//alert(res.responseText);
},
failure: function(res, opts) {
alert('Fail');
}
});
}
}
]
}
]
});


var panel = new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: 'slide',
activeTab: 2,
items: [
{
xtype: 'container',
title: 'Info',
items: formBase
}
]
});
}
});



Thanks!
MK