Extjs formaction加载远程数据

Posted 2020-12-02 ditto

写在前面：

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.value
13                 },
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:100
43         },
44         items:[
45             {
46                 fieldLabel:‘图书名‘,
47                 name:‘name‘,
48                 readOnly:true//设为只读
49             },
50             {
51                 fieldLabel:‘作者‘,//表单控件的Label
52                 name:‘author‘,
53                 readOnly:true
54             },
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层的代码参见上篇！

 效果：