写在前面：
Ext.form.action.Load用于从指定的url加载服务器响应，通过params选项请求参数
遇到的问题：
- json串的拼接：后台返回一个对象，如果仅仅是单一的对象转json串，只要new JSONObect(object)即可，实际开发过程中，在返回的json串中要加上响应状态码，这就要拼接，单个的对象，如book，需要new 两次map，对象的集合如books，要new 一次list，在遍历books，每次循环要new一次map，然后添加到list中
- 收据转载的顺序要与前台表单中响应的顺序对应上，所以后台要用LinkedHashMap创建map，才能保证插入的书序和输出的顺序保持一致。
前台代码：
1 /* 2 ?*使用Ext.load.action.Load为表单装载数据 3 ?* 并不是用来提交表单而是用于从指定的URL加载服务器响应 4 ?* 通过params选项指定请求参数 5 ?*/ 6 ?7 Ext.onReady(function () { 8 ????var itemHandler = function (item,e) { 9 ????????Ext.getCmp(‘bookForm‘).load(10 ????????????{11 ????????????????params:{12 ????????????????????bookId:item.value13 ????????????????},14 ????????????????//提交失败15 ????????????????failure:function (form,action)16 ????????????????{17 ????????????????????Ext.Msg.alert("加载失败",action.result?action.result.msg:‘服务器响应出现错误！‘);18 19 ????????????????}20 ????????????});21 ????};22 23 ????//创建表单容器24 ????Ext.create(‘Ext.form.Panel‘,{25 ????????id:‘bookForm‘,26 ????????title:‘使用Ext.form.action.Load提交表单‘,27 ????????bodyPadding:5,28 ????????width:350,//指定表单宽度29 ????????//当提交表单时自动提交Ajax请求30 ????????url:‘/getBookById‘,31 ????????method:‘post‘,32 ????????layout:‘anchor‘,33 ????????//设置表单控件默认占满整个容器34 ????????defaults:{35 ????????????anchor:‘100%‘36 ????????},37 ????????//设置表单组件的默认类型38 ????????defaultType:‘textfield‘,39 ????????//为所有表单控件设置默认属性40 ????????fieldDefaults:{41 ????????????labelAlign:‘left‘,42 ????????????labelWidth:10043 ????????},44 ????????items:[45 ????????????{46 ????????????????fieldLabel:‘图书名‘,47 ????????????????name:‘name‘,48 ????????????????readOnly:true//设为只读49 ????????????},50 ????????????{51 ????????????????fieldLabel:‘作者‘,//表单控件的Label52 ????????????????name:‘author‘,53 ????????????????readOnly:true54 ????????????},55 ????????????{56 ????????????????fieldLabel:‘价格‘,57 ????????????????name:‘price‘,58 ????????????????readOnly:true//设为只读59 ????????????}60 ????????],61 62 ????????bbar:[63 ????????????{xtype:‘tbfill‘},64 ????????????{65 ????????????????text:‘选择图书‘,66 ????????????????xtype:‘splitbutton‘,67 ????????????????width:100,68 ????????????????menu:[//设置菜单69 ????????????????????{text:‘图书1‘,value:1,handler:itemHandler},70 ????????????????????{text:‘图书2‘,value:2,handler:itemHandler},71 ????????????????????{text:‘图书3‘,value:3,handler:itemHandler},72 ????????????????????{text:‘图书4‘,value:4,handler:itemHandler}73 74 ????????????????]75 ????????????}76 ????????],77 ????????renderTo:Ext.getBody()78 ????});79 });控制层代码：
1 ????protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 2 ????????req.setCharacterEncoding("utf-8"); 3 ????????//获取请求参数 4 ????????String bookId = req.getParameter("bookId"); 5 ????????Book book = new BookService().getBookById(Integer.valueOf(bookId)); 6 ?7 ????????Map<String,Object> temp = new LinkedHashMap<>(); 8 ????????//List list = new ArrayList(); 9 10 ????????temp.put("name",book.getBookName());11 ????????temp.put("price",book.getPrice());12 ????????temp.put("author",book.getAuthor());13 14 ????????//list.add(temp);15 16 ????????Map<String,Object> result = new LinkedHashMap<>();17 ????????result.put("success",true);18 ????????result.put("data",temp);19 ????????resp.setContentType("text/html;charset=utf-8");20 ????????PrintWriter out = resp.getWriter();21 ????????//将map包装成jsonObject后输出22 ????????System.out.println(new JSONObject(result));23 ????????out.print(new JSONObject(result));24 ????}关于业务层和Dao层的代码参见上篇！
效果：
Extjs formaction加载远程数据
原文地址：https://www.cnblogs.com/ditto/p/9279178.html