PDA

View Full Version : Sending Form Information via AJAX



mvbaffa
3 Oct 2010, 4:05 PM
Hi,

I am new to EXTJS.

In my Ajax applications I do not call an url directly. What I normally do is to get the form fileds content, call a WCF JSON Service using jQuery, treat the returned content and inform the user the results received.

In EXTJS how can I:
. Fill the form with the contents of an in-memory object. I will call a WCF service and fill the form with the data returned from the WCF Service;
. Force client field validation without using submit;
. Drive the Submit event. In this case if I can execute the client validation without submiting the form I could just handle a button event, call the validation and get the fields content;
. Update the form with the result returned from my WCF Service.

Thanks in advance,

troseberry
4 Oct 2010, 10:54 AM
In EXTJS how can I:
. Fill the form with the contents of an in-memory object. I will call a WCF service and fill the form with the data returned from the WCF Service;
Best if you create a data Store and then you can store the returned data in the Store. Ext.data.Store
. Force client field validation without using submit;
you can call the isValid() method on the form itself. You can specify vtypes for the fields which handle validation
. Drive the Submit event. In this case if I can execute the client validation without submiting the form I could just handle a button event, call the validation and get the fields content;
in the button's hanlder config call your isValid and also you can use the getValues() method to get your field values
. Update the form with the result returned from my WCF Service.
Once again if you have a form tied to a store you can just load the record you need after you load the store.

Check out the API docs everything is in there to help you with what you need. THe hardest part is probably making sure you can get the response from your WCF service to be read by the existing data readers.

mvbaffa
4 Oct 2010, 11:03 AM
In EXTJS how can I:
. Fill the form with the contents of an in-memory object. I will call a WCF service and fill the form with the data returned from the WCF Service;
Best if you create a data Store and then you can store the returned data in the Store. Ext.data.Store
. Force client field validation without using submit;
you can call the isValid() method on the form itself. You can specify vtypes for the fields which handle validation
. Drive the Submit event. In this case if I can execute the client validation without submiting the form I could just handle a button event, call the validation and get the fields content;
in the button's hanlder config call your isValid and also you can use the getValues() method to get your field values
. Update the form with the result returned from my WCF Service.
Once again if you have a form tied to a store you can just load the record you need after you load the store.

Check out the API docs everything is in there to help you with what you need. THe hardest part is probably making sure you can get the response from your WCF service to be read by the existing data readers.

I have jQuery Ajax Calls that were already tested against my JSON services. I maintain a ModelLocator class that stores the returned Value Objects. My problem is just to Bind this information to Forms, DataGrids and other EXTJS Components.
I will follow your tips and test against my WCF services calls.
Thank you very much.

darthwes
4 Oct 2010, 11:22 AM
You load forms with AJAX data like this:


xForm.getForm().load({
url: 'someUrl.php',
method: 'POST',
params: {
baseID: 1
},
failure: handleFailFn
})

You load form data from a json literal like this:



xForm.getForm().setValues(myJsonLiteral);


Also, you can do

xForm.getForm().submit({
url: 'someUrl.php',
method: 'GET',
clientValidation: true


to make a pre-submit validation call. If it fails, the failure listener for the submit request is fired with proper indication of why (form is invalid).

troseberry
4 Oct 2010, 11:23 AM
I would just translate those Jquery ajax calls to use a Ext.data.HttpProxy on your data store. should work with no problems. Just setup a Ext.data.JsonStore and setup the proxy to use the Ext.data.HttpProxy. Just look at the API docs for the correct syntax.

mvbaffa
4 Oct 2010, 11:46 AM
I will soon test your tips.

Thanks to all of you.