通常情况下，我们编写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" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Extjs动态加载Grid表格</title> 8 <!-- 导入Extjs支持库 --> 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的显示策略。
来源：https://www.cnblogs.com/xuxiace/archive/2012/03/07/2383180.html