Extjs + JSON instance

ArticleDirectory

• 4.2.java background code (solve JSON Chinese garbled characters ):

1. Introduction to JSON

JSON (JavaScript Object Notation) is a lightweight data exchange format. Easy to read and write. It is also easy to parse and generate machines. It is based on a subset of JavaScript programming language, standard ECMA-262 3rd edition-December 1999. JSON uses a completely language-independent text format, but it also uses a habit similar to the C language family (including C, C ++, C #, Java, JavaScript, Perl, Python, and so on ). These features make JSON an ideal data exchange language.

2. JSON is constructed in two structures:

 

1. A collection of name/value pairs ). In different languages, it is understood as an object, record, struct, dictionary, and hash table ), keyed list or associative array ).
2. An ordered list of values ). In most languages, it is understood as an array ).

 

These are common data structures. In fact, most modern computer languages support them in some form. This makes a data format based on these structuresProgramming LanguageExchange between them becomes possible.

3. Simple JSON instance

First, create a simple object called user.CodeAs follows:

User. Java

 Public   Class User {
 Private Integer userid;
 Private String username;
 Private String password;

 Public Integer getuserid (){
 Return Userid;
}
 Public   Void Setuserid (integer userid ){
 This . Userid = userid;
}

 Public String GetUserName (){
 Return Username;
}
 Public   Void Setusername (string username ){
 This . Username = username;
}

 Public String GetPassword (){
 Return Password;
}
 Public   Void Setpassword (string password ){
 This . Password = password;
}
}

Then we need to construct JSON with the simple object "user". The constructed JSON can also count the number of user objects in JSON. Here we create a new totaljson object.

Totaljson. Java

 Import Java. util. List;
 Public   Class Totaljson {
 Private   Long Results;//  Data Length  
      Private List items; //  Data entries  
     
 Public   Long Getresults (){
 Return Results;
}
 Public   Void Setresults ( Long Results ){
This . Results = results;
}

 Public List getitems (){
 Return Items;
}
 Public   Void Setitems (list items ){
 This . Items = items;
}
}

Finally, write a client to test the JSON usage. The Code is as follows:

Test2.java

 Import Java. util. arraylist;
 Import Java. util. List;
 Import Net. SF. JSON. jsonobject;

 Public   Class Test2 {
 Public   Static   Void Main (string [] ARGs ){
 //  Todo auto-generated method stub  
 List <user> List = New Arraylist <user> ();
 // Create user 1  
 User user1 = New User ();
User1.setuserid (1 );
User1.setusername ("zhangsan ");
List. Add (user1 );
 //  Create user 2  
 User user2 = New User ();
User2.setuserid (2 );
User2.setusername ("Lisi ");
List. Add (user2 );
 // Create a JSON object  
 Jsonobject jsonob = getjsonfromlist2 (list );
System. Out. println ("jsonob:" + jsonob );
 /**  
* Output result:
* Jsonob :{
* "Items ":[
* {"Password": "", "userid": 1, "username": "zhangsan "},
* {"Password": "", "userid": 2, "username": "Lisi"}],
* "Results": 2}
  */ 
}

 /**  
* Convert the list array to JSON Data Format
*  @ Param Beanlist list array to be converted
  */ 
 Public   Static Jsonobject getjsonfromlist2 (list beanlist ){
 Return Getjsonfromlist2 (beanlist. Size (), beanlist );
}

 /**  
* Convert the list array to JSON Data Format
*  @ Param  Recordtotal list array Length
*  @ Param  Beanlist list array to be converted
 */ 
 Public   Static Jsonobject getjsonfromlist2 ( Long Recordtotal, list beanlist ){
Totaljson Total = New Totaljson ();
Total. setresults (recordtotal );
Total. setitems (beanlist );
Jsonobject = jsonobject. fromobject (total );
 Return Jsonobject;
 //  Return jsonobject. tostring (); 
 }
}

Output result:

Jsonob: {"items": [{"password": "", "userid": 1, "username": "zhangsan" },{ "password ":"", "userid": 2, "username": "Lisi"}], "Results": 2}

From the output results, we can see that there are two records in this JSON, and the two records are shown in the following table.

Userid	Username	Password
1	Zhangsan
2	Lisi

It is worth noting that in jsonob, the items and results fields are defined in the totaljson object, while the password, userid, username is defined in the simple object "user. This is implemented through the jsonobject. fromobject (total) method. Total is the totaljson object.

4. extjs + JSON instance 4.1.extjs front-end code:

 

 VaR Userstore = New Ext. Data. Store ({ //  Define a DataSet object  
 Proxy: New Ext. Data. httpproxy ({
URL: 'user. do? Method = getuserlist × tamp = '+ New Date () //  Set the proxy request URL  
 }),

 // Reader: New Ext. Data. xmlreader ({// create an XML data parser  
//  Totalrecords: "Results ",  
//  Record: "userform", // corresponding form. The Field Names below are the same as those in this form, and the quantity can be different.  
//  ID: "userid"  
//  }, Ext. Data. Record. Create ([{  
//  Name: 'userid'  
//  },{ 
//  Name: 'username'  
//  },{  
//  Name: 'realname'  
//  },{  
//  Name: 'roleid'  
//  },{  
//  Name: 'telphone'  
// },{  
//  Name: 'email'  
//  },{  
//  Name: 'address'  
//  },{  
//  Name: 'remark'  
//  }])  
         
Reader: New Ext. Data. jsonreader ({
Totalproperty: 'results ',
Root: 'items ',
ID: 'userid'
},
['Userid', 'username', 'realname', 'roleid', 'telphone', 'email ', 'address', 'remark'])
});

 VaR Toolbar = New Ext. toolbar ([{ //  Create a tool bar component for gridpanel  
 Text: 'add employee information ',
Iconcls: 'add ',
Handler: adduser
},{
Text: 'delete employee information ',
Iconcls: 'delete ',
Handler: deleteuser
},{
Text: 'modify employee information ',
Iconcls: 'plugin ',
Handler: updateuser

}
, '-', 'Query :','', New Ext. UX. Form. searchfield ({
Store: userstore,
Width: 110
})

]);

 VaR Sm =New Ext. Grid. checkboxselectionmodel (); //  Create a re-selection mode object  
      VaR Cm = New Ext. Grid. columnmodel ([ //  Create a table column Model  
      New Ext. Grid. rownumberer (), Sm ,{
Header: "No ",
Width: 30,
Dataindex: 'userid ',
Hidden: True ,
Sortable: True 
},{
Header: "User Name ",
Width: 60,
Dataindex: 'username ',
Sortable: True 
},{
Header: "Real Name ",
Width: 60,
Dataindex: 'realname ',
Sortable: True 
},{
Header: "User role ",
Width: 60,
Dataindex: 'roleid ',
Sortable: True 
},{
Header: "contact number ",
Width: 60,
Dataindex: 'telphone ',
Sortable: True 
},{
Header: "email ",
Width: 80,
Dataindex: 'email ',
Sortable: True 
},{
Header: "Address ",
Width: 80,
Dataindex: 'address ',
Sortable:True 
},{
Header: "Remarks ",
Width: 60,
Dataindex: 'remark'
}]);

 VaR Usergrid = New Ext. Grid. gridpanel ({ //  Create a grid table component  
 Applyto: 'user-grid-Div ', //  Set the actual table location  
 Frame: True , //  Render table panel  
 Tbar: toolbar, //  Set top toolbar  
 Striperows: True , //  Display zebra crossings  
 Autoscroll: True , //  The scroll bar is displayed when the table width is queried.  
 Store: userstore,//  Set the dataset corresponding to the table  
 Viewconfig :{ //  Automatically fill the table  
 AutoFill: True 
},
SM: Sm, //  Set table check box  
 CM: cm, //  Set table columns  
 Bbar:New Ext. pagingtoolbar ({
Pagesize: 25,
Store: userstore,
Displayinfo: True ,
Displaymsg: 'display records from {0} to {1}, total records from {2 ',
Emptymsg: 'No records'
 //  , Items: ['-', new Ext. App. searchfield ({store: userstore})]  
 })
});
Userstore. Load ({ //  Load a dataset 
 Params :{
Start: 0,
Limit: 25
}
});

4.2.java background code (solve JSON Chinese garbled characters ):

 jsonobject jsonob = exthelper. getjsonfromlist2 (list); ///   replace list with jsonobject   
  system. out. println ("jsonob:" + jsonob); ///   background output 
  ///   response. setcontenttype ("text/XML; charset = UTF-8");   
  response. setcontenttype ("text/JSON; charset = UTF-8"); ///   solve the problem of Chinese garbled characters displayed on the foreground   
  response. getwriter (). write (jsonob. tostring ();