码迷,mamicode.com
首页 > Web开发 > 详细

Extjs formaction加载远程数据

时间:2018-07-08 10:37:40      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:span   code   建表   enc   type   js for   items   har   width   

写在前面:

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层的代码参见上篇!

 效果:

技术分享图片

Extjs formaction加载远程数据

标签:span   code   建表   enc   type   js for   items   har   width   

原文地址:https://www.cnblogs.com/ditto/p/9279178.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!