Extjs exercise -- fill the client form with information obtained from the server side. Pay attention to the transmission of Radio and Checkbox values.

This exercise example is derived from a friend's series of articles Extjs Study Notes 2-first understanding of the Form of Extjs (it is recommended to read this article first and explain it in detail), with a slight modification during the exercise.

This article records the problems that have been solved and not solved during the exercise. If you are interested, you can also take a look at them ~

Running Environment: vs2008

Preparation: 1. Create a New asp.net site ExtJS, add ext-3.1.0 folder (click to enter the ext-3.1.0 download page );

2. Create a new file forms.htm, simpleForm. ashx, and simpleFormLoad. ashx (copy it from the blog post on the first line of this Article)

3. Add JsonHelper. cs (serialization and deserialization between JSON and instances is not required here)

To fill in the client form information, use the load method of BasicForm. This method requires obtaining a json string from the server by default.

Body:

The main code in the original simpleFormLoad. ashx is very concise, as follows:

Public void ProcessRequest (HttpContext context) {context. response. contentType = "text/plain"; // The data returns context in JSON string format. response. write ("{success: true, data: {Name: \" ServerReply \ ", age: 10, email: \" yinzixin1985@hotmail.com \"}}");}

Click the "Load" button to Load the data, for example:

This is very smooth, and then I try to load the following Radio and Checkbox from the server through this method, so I modified the code in simpleFormLoad. ashx as follows:

Public void ProcessRequest (HttpContext context) {context. response. contentType = "text/plain"; // The data is returned in JSON string format string strJSON = "{success: true, data: {Name: \" ServerReply \ ", age: 10, email: \ "yinzixin1985@hotmail.com \", sex: \ "Male \", holobby: \ "Football \"} "; // string str = @" {success: true, data: {Name: "" ServerReply "", age: 10, email: "" yinzixin1985@hotmail.com "", sex: "Male" ", holobby: "" Football "" }}"; context. response. write (strJSON );}

The preceding two formats of JSON strings are correct.

Question: as the amount of data transmitted increases, it can be seen that the writing of JSON strings is more complicated. I have just read the problems related to JSON serialization, and I will use them here by the way.

Add a class firstJsonHelper. cs, Which contains a static method, as follows:

using System.Runtime.Serialization.Json;

// Serialize the object to JSON public static string ToJson <T> (T obj) {DataContractJsonSerializer d = new DataContractJsonSerializer (typeof (T); System. IO. memoryStream MS = new System. IO. memoryStream (); d. writeObject (MS, obj); string strJSON = System. text. encoding. UTF8.GetString (ms. toArray (); ms. close (); return strJSON ;}

Modify simpleFormLoad. ashx again as follows:

Public void ProcessRequest (HttpContext context) {Obj user = new Obj () {Name = "ServerReply", Password = "111", age = 10, email = "yinzixin1985@hotmail.com ", sex = "Male", holobby = "Basketball"}; // when determining the objcategory, the specified parameter name exactly corresponds to the id of the form item in forms.htm.

String strJSON = JsonHelper. toJson <Obj> (user); // serialize the object into a JSON string result = "{success: true, data:" + strJSON + "}"; context. response. contentType = "text/plain"; context. response. write (result); // automatically matches fields with the same name in the client form}

 

Problem 1: solve...

The values of Radio and Checkbox cannot be loaded, and the results are still shown in figure. Find the Radio of Ext3.1-API Document and find the following two items in its Config Options:

BoxLabel: String

The text that appears beside the checkbox

InputValue: String

The value that shoshould go into the generated input element's value attribute

 

Radio and Checkbox are not set in the original forms.htm file.InputValueIs to modify the code in forms.htm,

Add the "inputValue" attribute to Radio and Checkbox as follows:

new Ext.form.Radio({ name: 'sex', itemCls: 'float-left', clearCls: 'allow-float', fieldLabel: 'Sex', boxLabel: 'Male'}),

new Ext.form.Radio({ name: 'sex', itemCls: 'float-left', clearCls: 'allow-float', fieldLabel: 'Sex', boxLabel: 'Male', inputValue: 'Male'}),

 

Problem 2, not resolved yet...

Run again. Radio is successfully loaded, but the Checkbox still cannot be loaded,

Select the Checkbox on the page and click OK to submit it to the server. Then, you can get the value of the selected items of Radio and Checkbox, for example:

 

Why can I load Radio while not Checkbox ???