Chinaunix首页 | 论坛 | 博客
  • 博客访问: 873400
  • 博文数量: 372
  • 博客积分: 10063
  • 博客等级: 中将
  • 技术积分: 4220
  • 用 户 组: 普通用户
  • 注册时间: 2012-02-24 11:36
文章分类

全部博文(372)

文章存档

2012年(372)

分类: 虚拟化

2012-03-07 16:42:57

通常情况下,我们编写Extjs表格grid的时候,都是静态的,也就是说grid的表头、列都是固定的。在实际开发中,往往面对很多“非主流”的情况,就比如我曾经遇到的一个实际开发的案例,要求前台以Extjs Grid来显示数据库的表并进行编辑操作。数据库中有很多表,由于每张数据库表的字段数目是不同的,所以需要事先通过后台进行数据库表的字段计算,然后输出到前台给以显示。

  还好这不是什么难事,因为Extjs的所有的配置格式基本上都是Json格式的,所有只要Grid的相关配置参数(如columnModel、fields)是Json格式的,那就不管是前台写死的还是后台动态输出的,都无关紧要。

  本例,通过Extjs的ajax来请求后台Servlet的输出,然后决定Grid的显示效果:

(图一)Extjs动态加载grid的效果一

  之后,我们更改Servlet的输出方式,或者更改前台Extjs Ajax中url的地址,将显示如下效果:

(图二)后台决定前台Grid显示效果图二,可以看到列及列数都已经变化

来看index.jsp的代码:

1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
4 <html>
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7 <title>Extjs动态加载Grid表格title>
8
9 <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
10 <script type="text/javascript" src="../extjs/ext-base.js">script>
11 <script type="text/javascript" src="../extjs/ext-all.js">script>
12 <script type="text/javascript" src="../extjs/ext-lang-zh_CN.js">script>
13 <script type="text/javascript">
14 Ext.onReady(function(){
15 Ext.Ajax.request({
16           //加载servlet输出
17 url:"../PrintGridInfoServlet",
18           //url:"../PrintGridInfoTwo",
19 success:function(response,config){
20              //对后台输出的Json进行解码
21 json=Ext.util.JSON.decode(response.responseText);
22               //这里需要从后台动态加载
23             //这里的json.columnModel是从后台加载来的
24             var cm = new Ext.grid.ColumnModel(json.columnModel);
25             var store = new Ext.data.JsonStore({
26             //下面两个参数也是从后台加载来的
27 data:json.data,
28 fields:json.fieldsNames
29 });
30
31             var grid = new Ext.grid.EditorGridPanel({
32 title:'我是动态加载的!',
33 region: 'center',
34 border:'true',
35 stripeRows:true,
36 split: true,
37 renderTo: 'dyngrid',
38 height: 300,
39 width: 400,
40 cm:cm,
41 store:store
42 });
43 },
44 failure:function(){
45 alert("error");
46 }
47 });
48 });
49 script>
50 head>
51 <body>
52 <div id="dyngrid">div>
53 body>
54 html>

  只要把url更改为另外一个Servlet请求,如上所示,把17行的代码注释,打开18行代码,index.jsp将会显示图二效果。

  总结:只要后台输出的格式满足Extjs grid的json形式,就可以实现Extjs动态加载后台的grid。

  来看后台Servlet代码,首先是 PrintGridInfoServlet.java:

1 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
2 request.setCharacterEncoding("utf-8");
3 String gridJson = "{'action':true,'message':'error!',"
4 + "'data':["
5 + "{'number':'1','name': '张三','age': '21','edu': '家里蹲大学'},"//这是加载的数据,其实可以从数据库中以分页取出
6 + "{'number':'2','name': '张四','age': '21','edu': '哈佛大学'},"
7 + "{'number':'3','name': '张五','age': '21','edu': '牛津大学'},"
8 + "{'number':'4','name': '张六','age': '21','edu': '昆明铁路中学'},"
9 + "{'number':'5','name': '大佬','age': '58','edu': '三年私塾'}"
10 + "],"
11 + "'columnModel':["
12 + "{'header': '编号','dataIndex': 'number','width':40},"
13 + "{'header': '姓名','dataIndex': 'name',editor:new Ext.grid.GridEditor(new Ext.form.NumberField())},"
14 + "{'header': '年龄','dataIndex': 'age'},"
15 + "{'header': '学历','dataIndex': 'edu'}"
16 + "],"
17 + "'fieldsNames':[{name:'number'},{name:'name'},{name:'age'},{name:'edu'}]"
18 + "}";
19 response.setContentType("application/json;charset=utf-8");
20 PrintWriter out = response.getWriter();
21 System.out.println(gridJson);
22 out.print(gridJson);
23 }

  接下来,是PrintGridInfoTwo.java:

1 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
2 request.setCharacterEncoding("utf-8");
3 String gridJson = "{'action':true,'message':'error!',"
4 + "'data':["
5 + "{'course':'人工智能','teacher': 'Tom'},"//这是加载的数据,其实可以从数据库中以分页取出
6 + "{'course':'常微分','teacher': 'MR. Xu'},"
7 + "{'course':'武术','teacher': '王霸'},"
8 + "{'course':'天文常识','teacher': '尚文格'},"
9 + "{'course':'电子商务','teacher': '刘芳'},"
10 + "{'course':'数学分析','teacher': 'MR. Xu'},"
11 + "{'course':'大学生心理健康','teacher': '李四'}"
12 + "],"
13 + "'columnModel':["
14 + "{'header': '课程','dataIndex': 'course'},"
15 + "{'header': '授课教师','dataIndex': 'teacher'}"
16 + "],"
17 + "'fieldsNames':[{name:'course'},{name:'teacher'}]"
18 + "}";
19 response.setContentType("application/json;charset=utf-8");
20 PrintWriter out = response.getWriter();
21 System.out.println(gridJson);
22 out.print(gridJson);
23 }

  为了更接近于实际开发,我们通常会把数据的查询和列的显示放在不同的控制器Servlet中进行处理,所以,可以让Extjs Ajax请求两个Servlet,让他们分别从数据库抓取数据和决定grid的显示策略。

阅读(999) | 评论(1) | 转发(0) |
给主人留下些什么吧!~~

☆彼岸★花开2012-03-08 23:07:26

动态加载啊,好强大!