通常情況下，我們編寫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的顯示策略。