ExtJS form submission to Novice

ExtJS three ways to submit:

Form Ajax submissions, ordinary commits, separate AJAX submissions;

1. Form Ajax Submission (default submission method)

Submit function: Execute the following btn function when pressing the Submit button in the form, and submit it according to the form's name. After submitting the data, depending on the return value of the background success or failure function (unlike the individual Ajax commits), the background returns the form of the value:
"If Outputresult (" {success:true} ") is returned, the function of success is called. If return: Outputresult ("{success:false,reason: '" +e.getcause () + "'}"); Then call the failure function "

function btn () {

Form.getForm.submit ({

Method: ' POST ',

params:{},//Parameters passed

Url:save_url,//define the URL to jump to, this property must have

Success:function (form,action) {

Ext.Msg.alert (' info ', ' Hint: ' + ' response.responsetext '),//bold is the return information for the backend.

Ext.Msg.alert (' Hint ', ' data modification successful ');//Success Message

Store.load (); Reload data

},

Failure:function (form,action) {

Ext.Msg.alert (' hint ', ' jump failed ');

}

});

}

2. Normal commit: Submit by name in the form.

Form. = new Ext.formpanel ({

...//properties of a form

Submit:function () {

This.getel (). dom.action = ' url ';//URL Submitted

This.getel (). Dom.method = ' post ';

This.getel (). Dom.submit ();

},

});

When you press the Submit button, the following function is executed:

function btn () {

Form.form.submit ();

}

3.extjs of ordinary Ajax submissions:

When the submit button is pressed, it executes the secondary function: (Note: You cannot submit a form form, that is, you cannot submit a form by its name, but only the parameters in the params.) As long as it can be submitted to the background regardless of whether the data can be executed correctly callback success function, if the network is faulty, or the page has bad data to the background, execute the failure function.

The background returns the form of a value: "If data processing successfully returns Outputresult (" {success:true, ' ... '} "). If data processing fails, return: Outputresult ("{success:false,reason: '" +e.getcause () + "'}"); "

Our general requirements are: successful data processing after the display of success information, failed to display the failure message.

However, this commit will execute the success function regardless of the value returned. So we can not meet the requirements. In order to solve this contradiction, we have some methods:

We get the return value in the Success function in the JS page, we judge the return value, if success is true I print success information, if success is false we will print the failure prompt.

Get return value: var Responsearray = Ext.util.JSON.decode (Response.responsetext); The judgment is as follows:

function btn () {

...//define URL or outside of method

Ext.Ajax.request ({

url:url,//the URL to jump to, this property must have

Method: ' Post ',

params:{},//Submit parameter

Success:function (response, options)

{

var Responsearray = Ext.util.JSON.decode (Response.responsetext);

if (responsearray.success==true)

{

EXT.EXAMPLE.MSG (' Hint ', ' data saved successfully ');

}

else{

Ext.Msg.alert (' Error ', Responsearray.reason);

}

}

Failure:function (response,options)

{

Ext.Msg.alert (' Warning ', "Data processing error cause \" +response.responsetext);

}

});

}

JSON data format

{"Success": "True", "data": {"id": "$", "name": "12344553252", "description": "ADFFAFDADF"}}

The format is important and the format is correct to be read in the form.

Normal way to submit:

Text: "Normal Way",
Handler:function () {
if (Form1.form.isValid ()) {
Data from the form can be taken from the server-side form only with the ID of the specified TextField or the name attribute
If both the ID and name are specified, the name attribute will be the server-side form key that takes the form data
var form = Form1.getform (). Getel (). Dom;
form.action = ' submit.aspx?method=submit1&param1=abc ';
When specified as Get mode, the parameters specified in the URL are invalidated, and the form items are converted to Key=value in the URL to be passed to the server
For example, if this is specified as GET, the URL is: submit.aspx?param2= the value you entered
Form.method = ' GET ';//get, POST
Form.submit ();
}
}

Default Ajax way to commit

ExtJS form submission to Novice