ExtJS formaction Loading Remote Data

Write in front:

Ext.form.action.Load used to load the server response from the specified URL, requesting parameters via the params option

Problems encountered:

• JSON string splicing: Back to an object in the background, if only a single object to the JSON string, as long as new Jsonobect (object), in the actual development process, in the returned JSON string to add the response status code, which will be splicing, a single object, such as book, Need new Two times map, a collection of objects such as books, to new list, in the traversal of books, each cycle to new map, and then added to the list
• Receipts are reproduced in order to correspond with the order of the response in the foreground form, so the background to use Linkedhashmap to create a map, to ensure that the order of the inserted book and output consistency.

Front Code:

1 /*2 * Use Ext.load.action.Load to load data for the form3 * Not used to submit a form but to load a server response from a specified URL4 * Specify request parameters with the params option5  */6 7Ext.onready (function () {8     varItemhandler =function(item,e) {9EXT.GETCMP (' Bookform '). Load (Ten             { One params:{ A BookId:item.value -                 }, -                 //Commit Failed theFailurefunction(form,action) -                 { -Ext.Msg.alert ("Load Failed", Action.result?action.result.msg: ' Server response error has occurred! ‘); -  +                 } -             }); +     }; A  at     //Create a form container -Ext.create (' Ext.form.Panel ',{ -ID: ' Bookform ', -Title: ' Submit form using Ext.form.action.Load ', -Bodypadding:5, -WIDTH:350,//Specify form width in         //automatically submit AJAX requests when submitting forms -URL: '/getbookbyid ', toMethod: ' Post ', +Layout: ' Anchor ', -         //set form controls to fill the entire container by default the defaults:{ *Anchor: ' 100% ' $         },Panax Notoginseng         //Set the default type for form components -DefaultType: ' TextField ', the         //set default properties for all form controls + fielddefaults:{ ALabelAlign: ' Left ', thelabelwidth:100 +         }, - items:[ $             { $Fieldlabel: ' Book name ', -Name: ' Name ', -ReadOnly:true//set to read-only the             }, -             {WuyiFieldlabel: ' Author ',//label for form control theName: ' Author ', -ReadOnly:true Wu             }, -             { AboutFieldlabel: ' Price ', $Name: ' Price ', -ReadOnly:true//set to read-only -             } -         ], A  + bbar:[ the{xtype: ' Tbfill '}, -             { $Text: ' Select book ', theXtype: ' SplitButton ', thewidth:100, themenu:[//Settings Menu the{text: ' Book 1 ', Value:1, Handler:itemhandler}, -{text: ' Book 2 ', Value:2, Handler:itemhandler}, in{text: ' Book 3 ', Value:3, Handler:itemhandler}, the{text: ' Book 4 ', Value:4, Handler:itemhandler} the  About                 ] the             } the         ], the renderTo:Ext.getBody () +     }); -});

Control Layer Code:

1     protected voidDoPost (httpservletrequest req, HttpServletResponse resp)throwsservletexception, IOException {2Req.setcharacterencoding ("Utf-8");3         //GET Request Parameters4String bookId = Req.getparameter ("BookId");5Book book =NewBookservice (). Getbookbyid (Integer.valueof (bookId));6 7map<string,object> temp =NewLinkedhashmap<>();8         //List List = new ArrayList ();9 TenTemp.put ("name", Book.getbookname ()); OneTemp.put ("Price", Book.getprice ()); ATemp.put ("Author", Book.getauthor ()); -  -         //List.add (temp); the  -map<string,object> result =NewLinkedhashmap<>(); -Result.put ("Success",true); -Result.put ("Data", temp); +Resp.setcontenttype ("Text/html;charset=utf-8"); -PrintWriter out =Resp.getwriter (); +         //Package map as Jsonobject output ASystem.out.println (Newjsonobject (Result)); atOut.print (Newjsonobject (Result)); -}

For code on the Business layer and DAO layer, see the previous article!

Effect:

ExtJS formaction Loading Remote Data