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 : "没有记录"

})

});

 

})