日期:2014-05-16  浏览次数:20351 次

extjs 关于editorgrid表中修改内容的保存问题
1.首先建立一个可编辑的grid
var cum = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
				header : "编号",
				dataIndex : "pno"
			}, {
				header : "参数名称",
				dataIndex : "pname"        
			}, {
				header : "参数值",
				dataIndex : "defaultValue",
				editor : new Ext.grid.GridEditor(
					new Ext.form.TextField({
						allowBlank : false
					})
				)
			}, {
				header : "备注",
				dataIndex : "remark"
			}]);

	cum.defaultSortable = true;

	var parambaseRecord = Ext.data.Record.create([{
				name : 'pno',
				type : 'integer'
			}, {
				name : 'pname',
				type : 'string'
			}, {
				name : 'defaultValue',
				type : 'string'
			}, {
				name : 'remark',
				type : 'string'
			}]);

	// 设置从后台获取数据
	var gridStore = new Ext.data.Store({
				proxy : new Ext.data.HttpProxy({
							url : context + '/paramprim/paramBaseList.action'
						}),
				reader : new Ext.data.JsonReader({
							totalProperty : 'totalCount',
							root : 'list',
							successProperty : '@success'
						}, parambaseRecord),
				remoteSort : true
			});
	// 设置默认的排序字段
	gridStore.setDefaultSort('pno', 'asc');
	gridStore.load();

	// 创建表格,设置分页
	var addParamWin_grid = new Ext.grid.EditorGridPanel({
				region : 'center',
				id : 'grid',
				loadMask : true,// 执行时有遮盖效果
				store : gridStore,
				viewConfig : {
					// 表格会自动延展每列的长度,使内容填满整个表格
					forceFit : true,
					columnsText : '显示的列',
					scrollOffset : 30,
					sortAscText : '升序',
					sortDescText : '降序'
				},
				height : 400,
				// autoHeight:true,
				autowidth : true,
				cm : cum,
				sm : new Ext.grid.RowSelectionModel({
							singleSelect : true
						}),
				bbar : new Ext.PagingToolbar({
							pageSize : 20,
							store : gridStore,
							beforePageText : "当前第",
							afterPageText : "页,共{0}页",
							lastText : "尾页",
							nextText : "下一页",
							prevText : "上一页",
							firstText : "首页",
							refreshText : "刷新页面",
							displayInfo : true,
							displayMsg : "当前显示 {0} - {1}条, 共 {2}条",
							emptyMsg : "没有记录"
						})
		  });

2.把修改内容转换成json数据传递回action
	var modified_TVM = gridStore_TVM.modified.slice(0); // 获取所有修改过的记录
								var editorRecords = [];//保存进数组
				Ext.each(modified_TVM, function(item) {
					// alert(item.data.ADDRESS); //读取当前被修改的记录地址
					editorRecords.push(item.data);// item.data中保存的是当前Record的所有字段
						// 的值(JSON),不包含结构信息 
					});
								updateParamWin_form.form.submit({
							url : context + '/paramprim/updateParamprim.action',
							method : 'post',
							success : function(form, action) {
								if (action.result.success) {
									var win = Ext.getCmp("winUpdateParam");
									win.close();
									Ext.Msg.alert('提示', '修改成功');
									store.load({
												params : {
													start : 0,
													limit : 20,
													ppno : null,
													pname : ""
												}
											});
								}
							},
							failure : function(form, action) {
								if (action.result.success == false) {
									Ext.Msg.alert('提示', action.result.msg);
								}
							},
	//把数据转换成json传递						
                   params : "data="
									+ encodeURIComponent(Ext
											.encode(editorRecords))
									+ '&pnameValue=' + pnameValue
						});

3.后台接收
接收到后是一个json类型的字符串,用JSONArray的tolist方法转换成相应的对象
1 楼 studentsky 2012-03-19  
我靠,能不能把页面修改后的数据如何实现回传写出来,关键代码呢?
2 楼 badmanisme 2012-03-28  
studentsky 写道
我靠,能不能把页面修改后的数据如何实现回传写出来,关键代码呢?

你看清楚我的标题,“关于表中修改内容的保存问题”,请看清楚“保存”这两个字,没涉及到数据回传,就算回传我没写出来,你想知道也不是这种口气说话,虚心请教,懂么?不然别人知道也不会告诉你
3 楼 clean1981 2012-06-12