extjs表格单元双击弹窗编辑grid和form互相传值

关键点：

设置双击事件  ---->  cellDblClick : function(grid, rowIndex, columnIndex, e)，

编辑框读取单元格内容  ---->  编辑框id.setValue(数据源ds.getAt(单元格列rowIndex).get(‘单元格对应id’))，

把编辑框修改后的值传到单元格中  ---->  ds.getAt(rowIndex).set('单元格对应id',编辑框的值text.getValue())

 

下面是详细代码：

Ext.onReady(function() {Ext.QuickTips.init();// 浮动信息提示//响应双击事件createWin = function(rowIndex, columnIndex) {var sure = new Ext.Button({text : '确定',handler : function(){//编辑框的值传到单元格中ds.getAt(rowIndex).set('name',name.getValue());win.close();}});var close = new Ext.Button({text : '关闭',handler : function() {win.close();} });var name = new Ext.form.TextArea({width : '80%',height : 'auto',id : 'name',name : 'name',grow : true,readOnly : false,fieldLabel : '姓名'});var form = new Ext.form.FormPanel({frame : true,html : '<div id="msg" class="tipmsg"></div>',items : [name],buttonAlign : 'center',buttons : [sure, close]});var win = new Ext.Window({title : '编辑窗口',resizable : false,width : '60%',shadow : true,height : 'auto',modal : false,maximizable : true,closable : true,items : form});//编辑框获取单元格的值name.setValue(ds.getAt(rowIndex).get('name'));win.show();} // 表格日期显示转换成日期格式function Todate(v) {if (v == null) {return null;}var d = new Date();var str = v.toString();var str1 = str.replace("/Date(", "");var str2 = str1.replace(")/", "");var dd = parseInt(str2);d.setTime(dd);return d;}; // 定义数据源为远程代理和JSON数据格式var ds = new Ext.data.Store({autoLoad : true,proxy : new Ext.data.HttpProxy({url : 'userAction_findAllUsers'}),// jsonreader的字段名称要与glut.bean中的类属性名一致，不要去匹配数据库字段reader : new Ext.data.JsonReader({totalProperty : 'totalProperty',root : 'root'}, [ {name : 'id'}, {name : 'name'}, {name : 'sex'}, {name : 'birthday',type : "date",dateFormat : "Y-m-d",convert : Todate}])});// 加载数据//ds.load(); // 定义复选框var sm = new Ext.grid.CheckboxSelectionModel(); // 定义列模型var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),// 添加自动行号sm,// 添加复选框{header : 'id',width : 40,sortable : true,dataIndex : 'id'}, {header : 'name',width : 40,sortable : true,dataIndex : 'name'},{header : 'sex',width : 40,sortable : true,dataIndex : 'sex'},{header : 'birthday',width : 40,sortable : true,dataIndex : 'birthday',type : 'date',renderer : Ext.util.Format.dateRenderer('Y-m-d')},{header : 'options',width : 40,dataIndex : 'options',renderer : function options(value, cellmeta) {var str = "<INPUT type='button' value='export4Word' onClick='myClick()'>";return str;}} ]); // 定义一个表格面板var grid = new Ext.grid.EditorGridPanel({id : 'user-grid',// 设置标识ID，方便以后引用！title : 'export_word',// 标题renderTo : Ext.getBody(),// 显示表格的地方sm : sm,// 复选框cm : cm,// 列模型ds : ds,// 数据源stripeRows : true,// 加上行条纹loadMask : true,// 加载数据时遮蔽表格border : true,// 加上边框frame : true,// 显示天蓝色圆角框autoHeight : true,// 自动设置高度，这个配置很重要width : '100%',x : 1,// 设置初始位置横坐标y : 1,// 设置初始位置纵坐标// floating : true,// 设置浮动，能否拖动成功就靠它了,注意设置浮动后它就置顶了// 响应导出案表按钮的事件listeners : {cellClick : function(grid, rowIndex, columnIndex, e) {// 按钮的位置位于第17列，如果列数有调整需要把这个数值也调整，或者把按钮长期永远放在最后，用length-1来替代12.var colCount = grid.colModel.config.length;if (columnIndex == colCount - 1) {var uIds = grid.getStore().getAt(rowIndex).get('id');Ext.Ajax.request({url : 'userAction_exportData',method : 'POST',params : {id : uIds},success : function(response, options) {window.open(response.responseText);},failure : function(response, options) {Ext.MessageBox.alert('失败','请求超时或网络故障,错误编号：'+ response.status);}});}},//双击事件，弹窗cellDblClick : function(grid, rowIndex, columnIndex, e) {var colCount = grid.colModel.config.length;if (columnIndex == colCount - 4) {createWin(rowIndex, columnIndex);}}},// UI视图配置viewConfig : {forceFit : true// 强制适应分布宽度},// 表格顶部动作或按钮工具栏tbar : new Ext.Toolbar({items : [ '-', {text : 'query',handler : function() {//加载数据ds.load();}},'-' ]}),// 表格底部分页工具栏（分页功能需要传start,limit参数到后台进行处理传回来才能实现）bbar : new Ext.PagingToolbar({pageSize : 10,store : ds,displayInfo : true,displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',emptyMsg : "没有记录"})}); })