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.indexOf("=");if(num>0){name=arrtmp.substring(0,num);value=arrtmp.substr(num+1);this=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){data.addColumns(res,p);}}makeGrid();},failure:function(){Ext.Msg.alert("消息","查询出错---->请打开数据库查看数据表名字是否正确");}});//动态生成GridPanelvar 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 blocke.printStackTrace();}System.out.println(json);out.print(json);}
页:
[1]