PDA

View Full Version : Redirecting to Web API after form submission.



KnowledgeSeeker
14 Apr 2014, 3:30 AM
I am uploading an image. This is the code of my view:


Ext.define('MyApp.view.AddCountry', {
extend: 'Ext.window.Window',
alias: 'widget.addcountry',
closable: true,
closeAction: 'destroy',
modal: true,
height: '28%',
width: '45%',
panelStatus: 'add',
panelId: 0,
initComponent: function () {
var me = this;
me.items = [{
xtype: 'form',
headers: { 'Content-Type': 'text/html' },
standardSubmit: true,
layout: 'form',
bodyPadding: '5 5 0',
itemId: 'addCountryForm',
frame: false,
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
maxLength: 25,
enforceMaxLength: true,
allowBlank: false,
name: 'Matrix'
}, {
xtype: 'textfield',
fieldLabel: 'Description',
maxLength: 100,
enforceMaxLength: true,
allowBlank: false,
name: 'description'
}, {
xtype: 'filefield',
name: 'flagImage',
fieldLabel: 'Flag',
buttonText: 'Select Image...'
}],
buttons: [{
text: 'Save',
itemId: 'btnSaveCountry'
}, {
text: 'Cancel',
itemId: 'btnCancelAdding'
}]
}];
this.callParent();
}
});

This is the upload code in my controller:


AddNewCountry: function (button) {
var form = button.up('form').getForm();
form.submit({
url: 'localhost/myapp/api/country/addcountry',
waitMsg: 'Please wait...',
success: function (f, o) {
Ext.Msg.alert('Success', o.result.result);
},
failure: function (f, o) {
Ext.Msg.alert('Error', o.result.error);
}
});
}

When I submit the form, it gets redirected to "localhost/myapp/api/country/addcountry" that shows this string:


{"$id":"1","success":true,"result":"Uploaded Successfully.","error":null}Can someone point out the error? If I remove "standardSubmit: true", The wait message keeps rendering. The control gets stuck there.

Gary Schlosberg
23 Apr 2014, 10:45 AM
Does it work without the file field?

KnowledgeSeeker
23 Apr 2014, 10:36 PM
The problem was that my file handling controller was in a different project that used a different port than the port used by my ExtJS project. I had to use a new generic handler at ExtJS side and it worked perfectly. It was a cross domain issue. I still don't know how to enable CORS. Thanks anyways.

Gary Schlosberg
9 May 2014, 3:49 PM
Glad to hear you dialed in on the problem. Here's a few links that might help you with CORS:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Connection-cfg-cors
http://enable-cors.org/