大家一定会给yui-ext的EditorGrid可编辑表格吸引，但编辑后怎么提交到后台Action？我也曾经苦恼了一段时间，在http://www.jackslocum.com/forum的论坛，jack sloc说过，如果使用XMLDataModel，你在grid编辑修改后，XMLDataModel中的数据也会同时修改，只要把XMLDataModel的数据生成xml提交后台就可以了，我在项目中没有实现XMLDataModel的xml传输，没验证他的说法，因为我找不到很好的java对象转换xml格式的包，希望网友有好的包介绍一下。
而我选择了JSONDataModel，要实现把json格式提交到服务器，jack sloc提示要自己转换json数据，晕，因为要在页面使用js脚本实现转换，开始觉得很难，但实现后发现并不困难，以下介绍一下，本文有些内容是参考了http://www.rodrigodiniz.qsh.eu/YahooGrid.aspx的grid例子：
1. 把dataModel数据回填Form中的元素
例子是实现把dataModel中的一行数据自动填到form表单的元素中，也就是替代struts的<html:XXX>标签，这里要告诉大家，连jstl都不能用了，因为不用刷新页面，但还好，我还有点javascript基础，jstl的一些功能还可以用js实现。
例子：
<form name="form1">
<input type="text" name="userId" value="">
<input type="text" name="userName" value="">
</form>
说明：随便做一个简单的form。

dataModel= new YAHOO.ext.grid.JSONDataModel(schema);
dataModel.addListener('load', onEditLoad);
dataModel.load('http://xxx/example2.do');
说明：在dataModel添加一个Listener，使用dataModel实时从后台example2.do取一个javabean对象new User(userId,userName)的数据(example2.do的实现可参考第一部分Action介绍)，javabean数据返回后激活onEditLoad()方法，yui-ext使用一般使用callback得到回调数据，待会儿介绍。

function onEditLoad() {
var row = dataModel.getRows([0,0]);
var fields=dataModel.schema.fields;
for(var i=0;i< fields.length;i++){
if ($(fields)!= null) {
$(fields).value= row[0];
}
}
}
说明：
因为返回是一个javabean，JSONDataModel已经转换成javascript数组对象，所以getRows([0,0]只取第一行数据[object1,object2]，object1中包括userId=XXX，object2包括userName=XXX，在schema取出与javabean对应的fields数组[userId,userName)，
这里用到prototype.js，网上很容易找到，它通过$(fields)调用form表单中的元素，其实$(fields)＝document.getElementById(fields))，通过循环就可以把dataModel数据自动填到form表单元素。

2. 页面提交表单方法一：
使用prototype.js把form元素通过Form.serialize()方法自动调交后台，Action以request.getParameter("xxx")获取数据。例子如下：
function Save(){
var callback = {
success : responseSuccess,
failure : responseFailure
};

var postData=Form.serialize($("form1"));
YAHOO.util.Connect.asyncRequest('POST', "http://xxx/example3.do", hcallback, postData);
}

var responseSuccess = function(o)
{
alert(o.responseText);
}

var responseFailure = function(o)
{
alert(o.statusText);
}

说明：建立一个callback方法，使用Yahoo UI的asyncRequest()方法post数据到action，其原理就是在链接后面加参数，象http://xxx/example3.do?userId=XXX&userName=XXX，后台action通过request.getParameter("xxx")获取数据，但缺点是要手工对建立user对象。

3. 页面提交表单方法二：使用Json数据格式提交到后台Action
1)前台js脚本例子：
function save() {
var fields=dataModel.schema.fields;
var objRet= new Object();
for(var i=0;i< fields.length;i++){
if ($(fields)!= null) {
objRet[fields]=$(fields).value;
}

var callback = {
success : responseSuccess,
failure : responseFailure
};

YAHOO.util.Connect.asyncRequest(
'POST',
'http://xxx/example3.do',
callback,
"outJSONXml=[" + YAHOO.ext.util.JSON.encode(objRet) + "]");
}
说明：通过dataModel的fields数组获取对象名，新建一个Object()对象，存放form表单中元素的value，然后通过Yahoo UI的JSON.encode()方法转换成json格式，其调交原理：
http://xxx/example3.do?outJSONXml=[---json数据格式---]

2) 后台Action(example3.do)接收json数据格式例子：
private BeanUtilsBean beanUtilsBean;

if (request.getParameter("outJSONXml")!=null) {
JSONObject jsonObject = new JSONObject();
jsonObject.put("JSonParser",request.getParameter("outJSONXml"));
List list = JSONArray.toList( jsonObject.getJSONArray( "JSonParser" ) );
JSONDynaBean beana = (JSONDynaBean) list.get(0);
User user = new User();
beanUtilsBean.copyProperties(user,beana)
}
说明：因为JSONDynaBean对象是继承于DynaBean，所以可以通过apache的common包中的BeanUtilsBean把对象自动从JSONDynaBean拷贝到user对象，这样就省去了手工把对象逐一赋值的麻烦。

3) 关于updateManager()方法
yui-ext也提供一个updateManager方法，实现和Yahoo asyncRequest()方法一样的功能，可以实现把后台反回的信息填入一个<Div>提示用户，例子如下：
var mgr = new YAHOO.ext.UpdateManager('errorDiv');
mgr.update('http://xxx/example3.do',
"outJSONXml=[" + YAHOO.ext.util.JSON.encode(objRet) + "]", );

updateManager使用callback回调：
mgr.update({
url: 'http://xxx/example3.do',
params: "outJSONXml=[" + YAHOO.ext.util.JSON.encode(objRet) + "]",
callback: updateString,
text: 'Loading...',
timeout: 10,
scripts: true
});

function updateString(oElement, bSuccess) {
if (bSuccess) {
alert(oElement.innerHTML);
}
}

总结：以上两部分一口气总结了我近两个星期对yui-ext在实际项目中测试应用的情况，现在我还在项目样例工程测试中，有很多细节的地方在这里没有很详细的罗列，由于yui-ext介绍的例子有限，对于前后台应用介绍很少，所以特意把经验写出来让大家少走弯路，共同研究，水平有限，请大家不要介意，请多交流指点。

如果看过yui-ext的例子，相信大家很想把它用在实际项目中去，我这两个星期都在研究它，国内几乎没有资料，只能从http://www.jackslocum.com的论坛找，我现在简单介绍一下我的实际开发环境：

我的项目原来的开发环境是Struts+Spring1.2.8+Hibernate3.1.2，现在要把页面的jsp+jstl，和Struts的Action转换成yui-ext的Ajax页面，简单实现数据列表、翻页和添加、修改、删除等功能。

1. 数据交换，要从Struts环境的Action通过request对象传递数据给jsp页面，如果用Ajax，比较常用的是XML转换和Json转换，我选择了Json，因为用json-lib包可以在java端用很方便的把对象转换成Json格式，在页面可以调用脚本eval()转换成javascript的数组对象。

1) json-lib转换java对象(下载json-lib:http://json-lib.sourceforge.net)
Action例子：(example.do)代码中加入：
response.setContentType("text/xml;charset=utf-8");
JSONArray jsonArray = JSONArray.fromObject(list);
response.getWriter().print("{datalist:" + jsonArray + "}");
return null;
简单说明：把action的return mapping改成null,因为现在使用response对象进行数据传递，fromObject(list)中的list包括就是页面需要调用显示的数据，可以是其他java对象，String、bean或Map。

2) JSONDataModel调用Action(example.do)
yui-ext通过JSONDataModel.js把json格式转换成javascript的数组对象
js例子：
var schema = {
root: 'datalist',
id: 'nothing',
fields: ['a','b', 'c', 'd']

dataModel= new YAHOO.ext.grid.JSONDataModel(schema);
dataModel.load('http://xxx/example.do');

说明：schema的root参数要和action传递的json数据头list对应，这里new JSONDataModel后，JSONDataModel会把example.do返回的json数据转换成dataModel的数组，JSONDataModel继承于LoadableDataModel，JSONDataModel只复杂转换json数据，其他由继承的类实现，这是yui-ext的特点，你可以自己写DataModel继承父类，转换自己的数据格式，yui-ext提供了JSONDataModel和XMLDataModel两种数据格式转换。

3) 使用grid显示dataModel数据
js例子：
var grid = new YAHOO.ext.grid.Grid('example-grid', dataModel, colModel);
grid.render();
jsp页面例子：
<div id="example-grid" style="border: 1px solid #cccccc; overflow: hidden; width: 535px; height: 225px;"></div>
说明：colModel的使用看example，grid绑定dataModel后，在页面的<Div>显示grid。