ExtJs GridPanel动态生成表单

 GridPanel生成表单后可以通过reconfigure(ds,cm),使用不同的Store和Column Model来改变。下面附上实现的方法。

javascript代码：

/*
 * 先生成一个原始表格
 */
var dbstore = new Ext.data.JsonStore({
			url : 'GridServlet',
			baseParams : {
				db : 0
			},
			totalProperty : "results",
			root : "rows",
			autoLoad : true,
			fields : [{
						name : 'name'
					}, {
						name : 'number'
					}, {
						name : 'percent'
					}]
		});
var mygrid = new Ext.grid.GridPanel({
			ds : dbstore,
			height : 200,
			width : 310,
			region : 'center',
			split : true,
			border : false,
			columns : [new Ext.grid.RowNumberer(), {
						xtype : 'gridcolumn',
						dataIndex : 'name',
						header : '区域',
						sortable : true,
						width : 200
					}, {
						xtype : 'gridcolumn',
						dataIndex : 'number',
						header : '数据量',
						sortable : true,
						width : 200
					}, {
						xtype : 'gridcolumn',
						dataIndex : 'percent',
						header : '百分比',
						sortable : true,
						width : 200
					}]
		});
/*
 * 定义一个动态生成表格的方法
 */
function showGrid(d) {
	var conn = new Ext.data.Connection();
	conn.request({
				url : 'GridServlet',
				params : {
					db : d
				},

				callback : function(options, success, response) {
					var a = response.responseText;
					var json = new Ext.util.JSON.decode(a);
					var cm = new Ext.grid.ColumnModel(json.ColumnModel);
					var fd = json.FieldsNames;
					mygrid.reconfigure(new Ext.data.JsonStore({
										data : json.data,
										fields : fd
									}), cm);
					var store = mygrid.getStore();
					store.load();
				}
			});
}

Ext.onReady(function() {

			var button1 = new Ext.Button({
						text : 'click me 1',
						listeners : {
							"click" : function() {
								showGrid(1);
							}
						}
					});
			var button2 = new Ext.Button({
						text : 'click me 2',
						listeners : {
							"click" : function() {
								showGrid(2);
							}
						}
					});
			var leftPanel = new Ext.Panel({
						region : 'west',
						width : 200,
						title : '导航',
						collapsible : true,
						autoScroll : true,
						split : true,
						minWidth : 150,
						maxWidth : 250,
						items : [button1, button2]
					});
			MyViewportUi = Ext.extend(Ext.Viewport, {
						layout : 'border',

						initComponent : function() {
							Ext.applyIf(this, {
										items : [{
													xtype : 'box',
													height : 32,
													region : 'north'
												}, leftPanel, mygrid]
									});
							MyViewportUi.superclass.initComponent.call(this);
						}
					});
			var view = new MyViewportUi();
		});

java后台'GridServlet'代码：

public class GridServlet extends HttpServlet {

	private static final long serialVersionUID = 1590134451592301771L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String db = request.getParameter("db");
		JSONObject obj = new JSONObject();
		if ("0".equals(db)) {
			List list = new ArrayList();
			Map map1 = new HashMap();
			map1.put("name", "广东省");
			map1.put("number", 4000000);
			map1.put("percent", "10%");
			Map map2 = new HashMap();
			map2.put("number", 3000000);
			map2.put("name", "湖南省");
			map2.put("percent", "9%");
			list.add(map1);
			list.add(map2);
			obj.put("results", list.size());
			obj.put("rows", JSONArray.fromObject(list));
		}
		if ("1".equals(db)) {
			List listFieldsNames = new ArrayList();
			List listColumnModel = new ArrayList();
			List listdata = new ArrayList();

			Map map1 = new HashMap();
			Map map2 = new HashMap();
			Map map3 = new HashMap();
			Map map4 = new HashMap();
			Map map5 = new HashMap();
			Map map6 = new HashMap();
			Map map7 = new HashMap();
			Map map8 = new HashMap();
			Map map9 = new HashMap();

			// 填充表头
			map1.put("header", "姓名");
			map1.put("dataIndex", "username");
			map1.put("sortable", true);
			map2.put("header", "年龄");
			map2.put("dataIndex", "age");
			map2.put("sortable", true);
			map3.put("header", "性别");
			map3.put("dataIndex", "gender");
			map3.put("sortable", true);
			listColumnModel.add(map1);
			listColumnModel.add(map2);
			listColumnModel.add(map3);

			// 填充关联fieldsNames
			map4.put("name", "username");
			map5.put("name", "age");
			map6.put("name", "gender");
			listFieldsNames.add(map4);
			listFieldsNames.add(map5);
			listFieldsNames.add(map6);

			// 填充数据
			map7.put("username", "张一");
			map7.put("age", "54");
			map7.put("gender", "男");
			map8.put("username", "张二");
			map8.put("age", "50");
			map8.put("gender", "女");
			map9.put("username", "张三");
			map9.put("age", "48");
			map9.put("gender", "男");
			listdata.add(map7);
			listdata.add(map8);
			listdata.add(map9);

			obj.put("ColumnModel", JSONArray.fromObject(listColumnModel));
			obj.put("FieldsNames", JSONArray.fromObject(listFieldsNames));
			obj.put("data", JSONArray.fromObject(listdata));
			obj.put("size", listdata.size());
		}
		if ("2".equals(db)) {
			List listFieldsNames = new ArrayList();
			List listColumnModel = new ArrayList();
			List listdata = new ArrayList();

			Map map1 = new HashMap();
			Map map2 = new HashMap();
			Map map3 = new HashMap();
			Map map4 = new HashMap();
			Map map5 = new HashMap();
			Map map6 = new HashMap();
			Map map7 = new HashMap();
			Map map8 = new HashMap();
			Map map9 = new HashMap();
			Map map10 = new HashMap();

			// 填充表头
			map1.put("header", "姓名");
			map1.put("dataIndex", "username");
			map1.put("sortable", true);
			map2.put("header", "年龄");
			map2.put("dataIndex", "age");
			map2.put("sortable", true);
			map3.put("header", "性别");
			map3.put("dataIndex", "gender");
			map3.put("sortable", true);
			map4.put("header", "文化水平");
			map4.put("dataIndex", "education");
			map4.put("sortable", true);
			listColumnModel.add(map1);
			listColumnModel.add(map2);
			listColumnModel.add(map3);
			listColumnModel.add(map4);

			// 填充关联fieldsNames
			map5.put("name", "username");
			map6.put("name", "age");
			map7.put("name", "gender");
			map8.put("name", "education");
			listFieldsNames.add(map5);
			listFieldsNames.add(map6);
			listFieldsNames.add(map7);
			listFieldsNames.add(map8);

			// 填充数据
			map9.put("username", "张一");
			map9.put("age", "54");
			map9.put("gender", "男");
			map9.put("education", "小学");
			map10.put("age", "50");
			map10.put("gender", "女");
			map10.put("username", "张三");
			map10.put("education", "初中");
			listdata.add(map9);
			listdata.add(map10);

			obj.put("ColumnModel", JSONArray.fromObject(listColumnModel));
			obj.put("FieldsNames", JSONArray.fromObject(listFieldsNames));
			obj.put("data", JSONArray.fromObject(listdata));
			obj.put("size", listdata.size());
		}

		response.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		out.print(obj);
		System.out.println(obj);
		out.flush();
		out.close();
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}

}