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);
}

}