PDA

View Full Version : how to keep value of the grid editor column?



daihuarong
22 Aug 2007, 11:57 PM
I want to edite a grid ,using EditorGrid.when i modify a column's value ,i want to save this record into DataBase 。 i use ext+json+struts2 to develop my applications.
the following is my code:
index.html


<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../css/ext-all.css" />
<script type="text/javascript" src="../scripts/yui-utilities.js"></script>
<script type="text/javascript" src="../scripts/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../scripts/ext-all.js"></script>
<script type="text/javascript" src="toolbar.js"></script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" />
<link rel="stylesheet" type="text/css" href="../examples.css" />
<style type="text/css">
body {font:normal 9pt verdana; margin:0;padding:0;border:0px none;overflow:hidden;}
#header{
background: url(images/header-bar.gif) repeat-x bottom;
border-bottom: 1px solid #083772;
padding:5px 4px;
}
.x-layout-panel-north, .x-layout-panel-south, #content .x-layout-panel-center{
border:0px none;
}
#content .x-layout-panel-south{
border-top:1px solid #aca899;
}
#content .x-layout-panel-center{
border-bottom:1px solid #aca899;
}
.xml-grid-example{
position: relative;
top: 0;
border-bottom: 1px solid #aca899;
border-left: 1px solid #aca899;
border-right: 1px solid aca899;
}
.toolbar{
position: relative;
top: 0;
margin:0 0 0 0;
border-left: 1px solid;
border-right:1px solid;
border-top:1px solid;
}
.x-dlg-font{color: red;}
.x-width{
position: relative;
width: 100%;
}
</style>
<s:head />
</head>
<body>
<s:form method="post" namespace="tableTest" onsubmit="return false;" id="modify-user">
<script type="text/javascript" src="../examples.js"></script>

<div id="container">
<div id="header" class="toolbar">
<div id="toolbar" ></div>
</div>
<div id="grid-panel">
<div id="grid-example" class="xml-grid-example"></div>
</div>
</div>
<div id="showDialog"
style="visibility:hidden;position:absolute;top:0px;">
<div class="x-dlg-bd">
<s:form method="post" namespace="tableTest" onsubmit="return false;" id="save-user">
<div id="error-msg" class="x-dlg-font"/>
<s:fielderror/>
<s:hidden name="currentUserSysTest.id" value="%{currentUserSysTest.id}" id="currentUserSysTest.id" cssClass="x-width"></s:hidden>
<s:textfield key="currentUserSysTest.username" name="currentUserSysTest.username" id="currentUserSysTest.username" cssClass="x-width"></s:textfield>
<s:password key="currentUserSysTest.password" name="currentUserSysTest.password" id="currentUserSysTest.password" cssClass="x-width"></s:password>
<s:textfield key="currentUserSysTest.answer" name="currentUserSysTest.answer" id="currentUserSysTest.answer"></s:textfield>
<s:textfield key="currentUserSysTest.email" name="currentUserSysTest.email" id="currentUserSysTest.email"></s:textfield>
<s:select key="currentUserSysTest.gender" name="currentUserSysTest.gender" list="#request.vi_data_dict_deptype" listKey="data_no" listValue="name"
cssStyle="width:155px" id="currentUserSysTest.gender"/>
<s:textfield key="currentUserSysTest.favorite" name="currentUserSysTest.favorite" id="currentUserSysTest.favorite"></s:textfield>
<s:datetimepicker key="currentUserSysTest.birthday" name="currentUserSysTest.birthday" id="currentUserSysTest.birthday"></s:datetimepicker>
<s:textfield key="currentUserSysTest.remark" name="currentUserSysTest.remark" id="currentUserSysTest.remark"></s:textfield>
</s:form>
</div>
</div>
</s:form>
</body>
</html>

part of studyExt.js


var fm = Ext.form,Ed = Ext.grid.GridEditor;
var cm = new Ext.grid.ColumnModel([
{header: "Username",
width: 100,
sortable: true,
locked:false,
dataIndex: 'username'
},{
header: "Password",
width: 200,
sortable: true,
dataIndex: 'password',
editor: new Ed(new fm.TextField({
allowBlank: false
}))
},{
header: "answer",
width: 200,
sortable: true,
dataIndex: 'answer'
},{
header: "email",
width: 100,
sortable: true,
dataIndex: 'email'
},{
header: "gender",
width: 50,
sortable: true,
dataIndex: 'gender'
},{
header: "favorite",
width: 200,
sortable: true,
dataIndex: 'favorite'
},{
header: "birthday",
width: 100,
sortable: true,
renderer: Ext.util.Format.dateRenderer('Y-m-d'),
dataIndex: 'birthday'
},{
header: "remark",
width: 200,
sortable: true,
dataIndex: 'remark'
}]);

cm.defaultSortable = true;
var grid= new Ext.grid.EditorGrid("grid-example",{
ds:ds,
cm:cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:false,
});

var layout = Ext.BorderLayout.create({
center: {
margins:{left:3,top:3,right:3,bottom:3},
panels: [new Ext.GridPanel(grid)]
}
}, 'grid-panel');



paging.add('-', {
pressed: true,
enableToggle:true,
text: 'save',
toggleHandler: saveHandler
});

function saveHandler()
{
var commentSuccess=function(o){ ds.reload(); };
var commentFailure=function(o){alert('commit fail !');};
var m = ds.modified.slice(0);
var jsonData = "[";
for(var i = 0, len = m.length; i < len; i++){
var ss =m[i].data;
Ext.lib.Ajax.formRequest('save-user','save.action',
{success: commentSuccess, failure: commentFailure})
}
ds.modified = [];
ds.load({params:{start:paging.cursor, limit:5 }});
}

deploy save action in struts-UserSysTestAction.xml:


<action name="save"
class="com.struts.test.action.UserSysTestAction" method="save">
<result type="redirect">list.action</result>
<interceptor-ref name="basicStack" />
</action>


i want to save my modification in saveHandler(),how can i do ? someonecan help me ?

jsakalos
25 Aug 2007, 3:37 PM
Have you seen grid videos?