Ext EditorGridPanel使用外部编辑器，如何将返回值赋给cell保存--自己解决啦，大家快进来，送分了

Pliman 2010-03-11 12:11:27

最近用ext做项目的时候，遇到个问题，数据记录在grid中，在点击cell选择项目的时候，需要调用弹出框进行选择，选择后，将值写会cell，然后再保存。如图：

不过我发现每次将值写会后，点击保存，又恢复成原值了，开始初步制定了4中方案：
1.直接赋值将返回值设到grid，store的record中 ---实验结果：不通过
2.新建editor并赋值返回值后，新建列的editor，并将返回值作为editor的值 ---实验结果：不通过
3.获取原有editor，并设值将原editor的值设为返回值 ---实验结果：不通过
4.了解初始editor给cell赋值的过程，并模拟此过程 ---实验结果：未作该实验，因为还不了解初始editor给cell赋值的过程

找了好久，也没发现相关文章，希望各位帮忙看看，有什么好的解决方式，或者以上实验有哪些纰漏，以至于结果出错了。
下面贴上源代码：由于使用showModalDialog，只有在IE或FF3.0及以上版本使用，请谅解
另外，使用ext2.0.1，请修改ext的路径，以便引入ext
主页面：prjgrid.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>

<body>

<br>
<script>

Ext.onReady(function(){

//全选复选框
var sm = new Ext.grid.CheckboxSelectionModel();

//设置列
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id',width:40,sortable:true},
{header:'名称',dataIndex:'name',width:80},
{id:'descn',header:'描述',dataIndex:'descn',width:200,renderer:renderDescn},
{header:'性别',dataIndex:'sex',width:80,renderer: function (value){
if ( value == 'male')
{
return "<span style='color:red;font-weight:bold;'>男</span><img src='drop-no.gif' />";
} else {
return "<span style='color:green;font-weight:bold;'>女</span><img src='drop-add.gif' />";
}

}},{
header:'日期列',
dataIndex:'date',
editor: new Ext.grid.GridEditor(new Ext.form.DateField( {
format:'Y-m-d',
minValue:'2007-12-14',
disabledDays:[0,6],
disabledDaysText:'只能选择工作日'
} )),
renderer: function(value) {
return value.format("Y-m-d");
}
}

//{header:'日期',dateIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);

//定义数据
var data = [

['1','啊','descn1','male',new Date()],
['2','波','descn2','female',new Date()],
['3','车','descn3','male',new Date()],
['4','衣','descn4','female',new Date()],
['5','服','descn5','male',new Date()],
['6','波','descn2','female',new Date()],
['7','车','descn3','male',new Date()],
['8','衣','descn4','female',new Date()]
];

//数据转换
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name:'id'},
{name:'name'},
{name:'descn'},
{name:'sex'},
{name:'date'}
//{name:'date',type:'date',dateFormat:'Y-m-dTH:i:s'}
]),
sortInfo: {field:"name", direction:"ASC"}
});
//store.load();

//取得描述列的信息
function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {

var str = "<input type='button' value='查看详细信息' onclick='alert(\"" +
"这个单元格的值是：" + value + "\\n" +
"这个单元格的配置是：{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}\\n" +
"这个单元格对应行的record是：" + record + ",一行的数据都在里面\\n" +
"这是第" + rowIndex + "行\\n" +
"这是第" + columnIndex + "列\\n" +
"这个表格对应的Ext.data.Store在这里：" + store + ",随便用吧." +
"\")'>";

return str;
}

//定义表格
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
width:650,
height: 250,
frame:true,
//loadMask: true,
stripeRows:true,
store: store,
cm: cm,
sm:sm,
//viewConfig:{
// forceFit: true
//}
//autoExpandColumn:'descn',

//添加分页工具条
bbar:new Ext.PagingToolbar({
pageSize:2,
store:store,
displayInfo:true,
displayMsg:'显示第{0}条到{1}条记录，一共{2}条',
emptyMsg:"没有记录"
})

});

//数据加载
store.load();

//删除记录
Ext.get('remove').on('click',function() {
store.remove(store.getAt(1));
grid.view.refresh();
});

//拖动表格
var rz = new Ext.Resizable('grid', {
wrap:true,
minHeight:100,
pinned:true,
handles:'all'
});
rz.on('resize',grid.syncSize,grid);

//添加右键菜单
var contextmenu = new Ext.menu.Menu({
id:'theContextMenu',
items: [{
text:'查看详情',
handler: function() {
}
},
{
text:'菜单二',
handler: function() {}
}]
});

//调用右键菜单
grid.on("rowcontextmenu",function(grid, rowIndex,e) {
e.preventDefault();
grid.getSelectionModel().selectRow(rowIndex);
contextmenu.showAt(e.getXY());
});

});

</script>

<table border="1" align="center">
<tr>
<td><font color="red">grid表格样式如下：</font></td>
</tr>
<tr>
<td><div id="grid"> </div></td>
</tr>
<tr>
<td><input type="button" id="remove" value="删除第二行"/></td>
</tr>

</table>
</body>
</html>

弹出页面：选择项目用
select_proj.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>选择项目</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script>
/*确定*/
function ev_sure(){
var obj=window.dialogArguments;
var pname = obj.document.getElementById('pname') ;
var pcode = obj.document.getElementById('pcode') ;
pname.value = '123' ;
pcode.value = '456' ;
window.close()
}
</script>
</head>

<body>
<table border="1" align="center">
<tr>
<td>
<div id="grid">项目：123 项目编码：456</div>
</td>
</tr>
<tr>
<td>
<input type="button" id="sure" value="确定" onclick="ev_sure()" />
</td>
</tr>
</table>
</body>
</html>

...全文