extjs 可编辑列批量录入数据

午休时间，工作需要初学extjs  做出来的界面，只有前台代码，后台的代码太多就不贴出来了  需要的朋友私信哈!

		//声明报表ID变量
	var modId = 83;

	var accName = '<%=accName%>';
    var currYear= <%=CURRACCYEAR%>;
	var currMonth=<%=CURRACCMONTH%>;
	Ext.onReady(function() {
					Ext.Ajax.request({
			    		method:"post",
			    		url:"common/workload/workloadList!openDeprCred.action",
			    		success:function(response){
			    		var objDelData = Ext.util.JSON.decode(response.responseText);
			    		if(objDelData.errNo==1){	//判断后台传来的msg
			    			Ext.MessageBox.alert("警告", objDelData.errMsg); 
			    			return;
			    		}
			    		if(objDelData.errNo==2){
					 	  	Ext.Msg.show({
					 	  		title : '系统提示',
								buttons : Ext.MessageBox.OK,
								icon : Ext.MessageBox.INFO,
								msg : objDelData.errMsg
					 	  	});
					 	  	show(objDelData.msg);
			    			return;
					 	  }
					 	  if(objDelData.errNo==3){
					 	 	 show(objDelData.msg);	//如果本期已经折旧，就不显示界面
					 	  }
					   }
			   	});
	});

	function show(edit){	//加载界面
	//grid
	Ext.QuickTips.init();
		var reader = new Ext.data.JsonReader({
			root : "listData",
			total:"count",
			id : 'id'
		}, [ {
			name : 'id'
		}, {
			name : 'yearmon'
		}, {
			name : 'code'
		}, {
			name : 'name'
		}, {
			name : 'total'
		}, {
			name : 'usedall'
		}, {
			name : 'workload'
		} ]);
	
		var proxy = new Ext.data.HttpProxy({
			url : 'common/workload/workloadList!doGetListData.action'
		});
		var store = new Ext.data.Store({
			proxy : proxy,
			reader : reader
		});

		store.load({
			params : {
				start : 0,
				limit : 20,
				currYear : "",	
				currMonth : ""
			}
		}); //加载数据 

		var nu = new Ext.grid.RowNumberer(); //自动编排序号
		//grid的列模型
		var colM = new Ext.grid.ColumnModel([ nu,
		 {header : "id",dataIndex : "id",sortable : true,hidden : true,hideable: false
		}, {header : "月份",dataIndex : "yearmon",width : 150, css:'background: #f6f5ec;'
		}, {header : "固定资产编码",dataIndex : "code",width : 150, css:'background: #f6f5ec;'
		}, {header : "固定资产名称",dataIndex : "name",width : 180, css:'background: #f6f5ec;'
		}, {header : "总工作量",dataIndex : "total",width : 150, css:'background: #f6f5ec;'
		}, {header : "初期累计工作量",dataIndex : "usedall",width : 150, css:'background: #f6f5ec;'
		}, {header : "本期工作量",dataIndex : "workload",width : 150,
			editor : new Ext.form.NumberField()
		} ]);
		
		//grid的工具栏		
		var readerDate = new Ext.data.ArrayReader({}, [ {
			name : 'id'
		}, {
			name : 'name'
		} ]);
		//显示月份的下拉框
		var comn  = new Ext.form.ComboBox({
			id : 'months',
			xtype : 'combo',
			mode : 'local',
			editable : false,
			store : new Ext.data.Store({
				reader : readerDate,
				data : []
			}),
			width : 40,
			valueField : 'name',
			displayField : 'id',
			triggerAction : 'all',
			autoSelect : true,
			listeners : {
				beforerender : function() {
					var monthlist = [];
					for ( var i = 1; i <= 12; i++) {
						monthlist.push([ i, i ]);
					}
					this.store.loadData(monthlist);
				}
			}
		});

		//年份下拉控件	                                        
		var ycom = new Ext.form.ComboBox({
			id : 'years',
			xtype : 'combo',
			mode : 'local',
			editable : false,
			store : new Ext.data.Store({
				reader : readerDate,
				data : []
			}),
			width : 60,
			valueField : 'name',
			displayField : 'id',
			triggerAction : 'all',
			autoSelect : true,
			listeners : {
				beforerender : function() {
					var newyear = Ext.util.Format.date(new Date(), 'Y');//取现在的年份数
					var yearlist = [];
					for ( var i = newyear + 10; i >= 1990; i--) {
						yearlist.push([ i, i ]);
					}
					this.store.loadData(yearlist);
				}
			}
		});
			Ext.getCmp('years').setValue(currYear);
			Ext.getCmp('months').setValue(currMonth);
	//创建grid上的工具栏
		var tb3 = new Ext.Toolbar({
  		  items: ['期间:',ycom,'年',comn,'月',
			 '-',{
       		     text: "查找",
       		     iconCls : 'view-icon',
       		     handler :function(){
       		     	var months=Ext.getCmp("months").getValue();
       		     	var years=Ext.getCmp("years").getValue();
       		     	if(months==""||years==""){
       		     			Ext.MessageBox.alert("提示","请选择相关年月！");
       		     			return;
       		     		}
       		     	var newUrl ="common/workload/workloadList!doGetListData.action";
		 			grid.store.proxy.conn.url=newUrl;
		 			grid.store.load({
						params : {
							start : 0,
							limit : 20,
							currYear:years,
					 	 	currMonth:months
						}
					});
					//Ext.getCmp("months").setValue("");	
       		     }
       		 },'-',{
       		 	text:"保存",
			    iconCls:"save-icon",
			    disabled :edit,
			    handler :function(){
			    		var store1=grid.getStore();
			    		store1.pruneModifiedRecords=true;
			    		//store的参数pruneModifiedRecords设置为true时，每次进行remove或load操作时store会自动清除modified标记
			    		var modified=store1.modified.slice();
			    		var isok=true;//定义一个条件属性
			    		var jsonArr=[];

			    		Ext.each(modified,function(m){ //grid里面的each方法，遍历被修改过的数据

			    			jsonArr.push(m.data);//将修改的数据加入到数组

			    		});
			    		if(isok){	//判断满足各个条件
			    		  if (jsonArr.length >0){	//如果数据没有被修改，不用提交
			    			Ext.Ajax.request({
			    				method:"post",
			    				url:"common/workload/workloadEdit!doGetAddnewData.action",
			    				success:function(response){
			    				var objDelData = Ext.util.JSON.decode(response.responseText);
			    				Ext.MessageBox.alert("提示",objDelData.errMsg);
			    				grid.store.reload();	
			    				},failure: function(response) {  
                    				Ext.MessageBox.alert("警告", objDelData.errMsg);  
                    				grid.store.reload();
               					 },  
			    					params:{data:Ext.util.JSON.encode(jsonArr)}
			    				});
			    			}else{
			    				 Ext.MessageBox.alert("警告", "数据没有被更新不需要保存！");  
			    			}
			    		}
			    	}
       		    },'-',{
       		     text: "导出",
       		    iconCls : 'export-icon',
       		     handler :function(){
       		     singleToExcel(grid);
       		     }
       		 },'-',{
       		     text: "刷新",
       		     iconCls : "refresh-icon",
       		     handler :function(){
       		     Ext.getCmp('years').setValue(currYear);
				 Ext.getCmp('months').setValue(currMonth);
       		     	var newUrl ="common/workload/workloadList!doGetListData.action";
		 			grid.store.proxy.conn.url=newUrl;
		 			grid.store.load({
						params : {
							start : 0,
							limit : 20,
							currYear : currYear,
							currMonth : currMonth
						}
					});
       		     }
       		 },'->','注意：只能录入或修改本期工作量，否则输入值无效！'
       		 ]
		});
	
		
	//创建一个可编辑的grid
		var grid = new Ext.grid.EditorGridPanel({
			id:"grid",
			renderTo : "grid",
			//title : "",
			height : 547,
			width : 1180,
			cm : colM,
			store : store,
			
			items:[tb3],
			autoExpandColumn:true,
			//tbar:[]
			enableHdMenu:false,//是否显示表头的上下文菜单
			clicksToEdit : 1
		});
		//grid.render();

		//验证合法数据--（暂时没用到）
	var checkBlank=function(modified){
		var result=true;
		Ext.each(modified,function(record){
			var keys=record.fields.keys;
			Ext.each(keys,function(workload){
				var value=record.data[workload];
				var colIndex=cm.findColumnIndex(workload);
				//var rowIndex=grid.getStore().indexOfid(record.id);
				
				var editor=cm.getCellEditor(colIndex).field;
				var e=editor.validateValue(value);
				if(!r){
					Ext.MessageBox.alert("验证","对不起你输入的数据不合法！");
					result=false;
					return;
				}
			});
		});
		return result;
	}
}

/*导出excel*/
function singleToExcel(grid) {
	
	Ext.Msg.confirm("提示", "是否要导出", function f(btn) {
				if (btn == 'yes') {

					var proxy1 = grid.store.proxy;
					var url = proxy1.getUrl();
					var reader1 = grid.store.reader;
					var newstore = new Ext.data.Store({
						url : url,
						proxy : proxy1,
						reader : reader1
					});

					newstore.load({
						params : {
						start : 0,
						limit : 20,
						currYear : currYear,
						currMonth : currMonth
					}
					}); //加载数据 
					
					var grid3 = new Ext.grid.GridPanel(
							{
								id : grid.id + 'excel',
								title :"工作量",
								store : newstore,
								cm : grid.getColumnModel(),
								sm : grid.sm,
								plugins : grid.plugins,
								view : grid.view
							});

					var title = grid3.title;
					var vExportContent = getsingleXml(grid3);
					var fd = Ext.get('frmDummy');
					if (!fd) {
						fd = Ext.DomHelper.append(Ext.getBody(), {
									tag : 'form',
									method : 'post',
									id : 'frmDummy',
									action : '/exportexcel/exportexcel.jsp',
									//target : '_blank',
									name : 'frmDummy',
									cls : 'x-hidden',
									cn : [{
												tag : 'input',
												name : 'exportContent',
												id : 'exportContent',
												type : 'hidden'
											}, {
												tag : 'input',
												name : 'title',
												id : 'title',
												type : 'hidden'
											}]
								}, true);
					}
					fd.child('#exportContent').set({
								value : vExportContent
							});
					fd.child('#title').set({
								value : title
							});
					fd.dom.submit();

				}
			});
}
</script>
		<style type="text/css">
#ext-gen19 {
	display: none;
}
</style>
	</head>
 	 <s:hidden id="mid" value="1"></s:hidden>
	 <input type="hidden" id="viewId" value=""></input>
	<body>
		<div id="grid" style="margin: -20px; padding:-10 -20;">
			
		</div>
	</body>