ext 动态grid 的写法

好多天都在研究Ext 动态grid 的写法.之前一直用到都是静态的.

下面是动态的js代码

function QueryString()
{
var name,value,i;
var str=location.href;
var num=str.indexOf("?")
str=str.substr(num+1);
var arrtmp=str.split("&");
for(i=0;i < arrtmp.length;i++){
num=arrtmp[i].indexOf("=");
if(num>0){
name=arrtmp[i].substring(0,num);
value=arrtmp[i].substr(num+1);
this[name]=value;
}
}
}

Ext.onReady(function(){
	
    var fm = Ext.form;

    var Request=new QueryString();
	var ID="";//Request["wlid"];
	//
	//声明函数变量  
  	var data; 
	//动态添加列
	var addColumn=function(){
		this.fields='';
		this.columns='';
		this.addColumns=function(name,caption){
			if(this.fields.length>0){
				this.fields+=',';
			}
			if(this.columns.length>0){
				this.columns+=',';
			}
			this.fields+='{name:"'+name+'"}';
			this.columns+='{header:"'+caption+'",dataIndex:"'+name+'",width:80,sortable:true}';
		};
		
	};
	//从服务器端获取列,然后动态添加到ColumnModel中
	Ext.Ajax.request({
		url:getRootPath()+'servlet/CommonServlet?change=aaa',
		success:function(response){
			if(response.responseText==""){
				return;
			}
			data=new addColumn();
			var res=Ext.util.JSON.decode(response.responseText);
			for(var i=0;i<res.length;i++){
				for(var p in res[i]){
					data.addColumns(res[i][p],p);
				}
			}
			makeGrid();
		},
		failure:function(){
			Ext.Msg.alert("消息","查询出错---->请打开数据库查看数据表名字是否正确");
		}
	});
	//动态生成GridPanel
	var makeGrid = function(){
		var cm=new Ext.grid.ColumnModel(eval('(['+data.columns+'])'));
		//new Ext.grid.RowNumberer;//自动显示行号
		cm.defaultSortable=true;
		cm.on("sss","ss");
		var fields=eval('(['+data.fields+'])');
		var newStore=new Ext.data.Store({
			proxy:new Ext.data.HttpProxy({url:getRootPath()+'servlet/CommonServlet?change=bbb'}),
			reader:new Ext.data.JsonReader({totalProperty:'totalPorperty',root:'root',fields:fields})
		});
		
		newStore.load();
		
		var gridPanel=new Ext.grid.GridPanel({
			align : 'center',
			width : Ext.get("UserBody").getWidth(),
			height : Ext.get("UserBody").getHeight() - 100,
			cm : cm,
			renderTo: 'UserBody',
			store : newStore,
			height:300,
			region : 'center',
			//margins : '0 5 5 5',
			frame : false, // 表格外加边框
			//columnLines : true,
			//clicksToEdit : 1,
			//trackMouseOver : false,
			//enableHdMenu : false,
			viewConfig:{
	        	forceFit:true,//所有列都改变宽度
				autoFill:true,
				sortAscText:'升序',
				sortDescText:'降序',
				columnsText:'显示列'
			}
		});
	}
});

 后台的数据类型

if("aaa".equals(change)){
     Map<String, Object> map1 = new HashMap<String, Object>();
	 map1.put("客户物料编号", "goodsId");//客户物料编号
	 map1.put("物料编号","goodsCode");//物料编号
	 map1.put("物料简称", "goodsName");//物料简称
	 map1.put("物料简称1", "goodsName1");//物料简称
	 map1.put("物料简称2", "goodsName2");//物料简称
	 map1.put("物料简称3", "goodsName3");//物料简称
	 map1.put("物料简称4", "goodsName4");//物料简称
	 map1.put("物料简称5", "goodsName5");//物料简称
   	 array.put(map1);
   	 out.print(array);
}

if("bbb".equals(change)){
			for(int i=1;i<100;i++){
				 Map<String, Object> map1 = new HashMap<String, Object>();
				 map1.put("goodsName", "ccc");//物料简称
    	         map1.put("goodsCode","bbb");//物料编号
    	         map1.put("goodsId", "aaa");//客户物料编号
    	         map1.put("goodsName1", "ccc1");//物料简称
    	         map1.put("goodsName2", "ccc2");//物料简称
    	         map1.put("goodsName3", "ccc3");//物料简称
    	         map1.put("goodsName4", "ccc4");//物料简称
    	         map1.put("goodsName5", "ccc5");//物料简称
    	         array.put(map1);
			 }
			try {
				json.put("root", array);
				json.put("totalPorperty", 3);
			} catch (JSONException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			System.out.println(json);
			out.print(json);

}