脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Extjs4 RowEditing 的使用和更新方法，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 如何灵活快速的掌握RowEdITing组件的应用，应大家的要求，今天给大家具体讲下该组件的使用。
1、创建
VAR rowEditing = Ext.create('Ext.grid.plugin.RowEditing',{
pluginId:'rowEditing',
saveBTnText: '保存',
cancelBtnText: "取消",
autoCancel: false,
clicksToEdit:2 //双击进行修改 1-单击 2-双击 0-可取消双击/单击事件
});
2、定义使用插件
extend: 'Ext.grid.Panel',
alias: 'widget.SubBody_Grid',
collapsible: false,
iconCls: 'icon-grid',
//frame: true, //显示Grid整个框架
height: window.innerHeight,
border: true,
loadMask: true,
columnLines: true, //显示列线
selTyPE: 'rowmodel',
plugins: [rowEditing], //定义使用插件
columns: [
{
dataindex: "Partno",
width: 100,
sortable: true,
//flex: 1 // grid宽度减去固定列宽以后占一份；
text: '物料编号'
}, {
dataIndex: "PurQty",
width: 70,
editor: 'numberfield', //在需要更改的字段设置编辑，并指明类型
renderer: Ext.util.Format.numberRenderer('0.00'),
align: 'right',
sortable: true,
text: '采购数量'
}, {
dataIndex: "DeliveryDate",
width: 90,
renderer: Ext.util.Format.dateRenderer('Y-m-d'),
editor: 'datefield',
align: 'right',
sortable: true,
text: '交期'
。。。。。。。。。。。以下省略。。。。。。。。
3、定义保存更新事件
以上就定义完成了。但如何进行更改后的保存呢？？？
不管是添加还是修改，保存用的事件都是是grid的edit事件
可用两种方式来定义edit事件！！！！
1、在创建时定义方式：
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing',{
pluginId:'rowEditing',
saveBtnText: '保存',
cancelBtnText: "取消",
autoCancel: false,
clicksToEdit:2 //双击进行修改 1-单击 2-双击 0-可取消双击/单击事件
listeners:{
edit:function(e){
var myMask = new Ext.LoadMask(Ext.getBody(), {
removeMask: true //完成后移除
});
myMask.show();
var id = e.record.get('Item');
// 更新提示界面(供调试使用)
Ext.Msg.alert('您成功修改信息', "被修改的内容是:" + e.record.get("Item") + "/n 修改的字段是:"+ e.field +"/n 对应的id为"+id);//取得更新内容
Ext.Ajax.request({
url: '/ashx/erp/purchase/PO_Form_BodySub_Upd.ashx',
params: {
PONum:e.record.get('PONum'),
Item:e.record.get('Item'),
PurQty:e.record.get('PurQty'),
DeliveryDate:e.record.get('DeliveryDate')
},
success: function(response){
var result = Ext.decode(response.responseText);
if(result.succeed){
e.record.COMmit();
//隐藏
myMask.hide();
Ext.Msg.show({
title:'操作提示',
msg: result.msg,
buttons: Ext.Msg.YES,
icon: Ext.Msg.WARNING
});
}else{
myMask.hide();
Ext.Msg.show({
title:'操作提示',
msg: result.msg,
buttons: Ext.Msg.YES,
icon: Ext.Msg.WARNING
});
}
},
failure: function (response, opts) {
Ext.Msg.show({
title:'操作提示',
msg: '修改失败',
buttons: Ext.Msg.YES,
icon: Ext.Msg.WARNING
});
}
})
}
}
});
2、定义时不定义，之后进行再添加事件的方式
PO_SubPart_Grid.on("edit", afteredit);
function afterEdit(e) {
var myMask = new Ext.LoadMask(Ext.getBody(), {
msg: '正在修改，请稍后...',
removeMask: true //完成后移除
});
myMask.show();
var id = e.record.get('Item');
Ext.Msg.alert('您成功修改了信息', "被修改的内容是:" + e.record.get("Item") + "/n 修改的字段是:"+ e.field +"/n 对应的id为"+id);//取得更新内容
Ext.Ajax.request({
url: '/ashx/erp/purchase/PO_Form_BodySub_Upd.ashx',
params: {
PONum:e.record.get('PONum'),
Item:e.record.get('Item'),
PurQty:e.record.get('PurQty'),
DeliveryDate:e.record.get('DeliveryDate')
},
success: function(response){
var result = Ext.decode(response.responseText);
if(result.succeed){
e.record.commit();
//隐藏
myMask.hide();
Ext.Msg.show({
title:'操作提示',
msg: result.msg,
buttons: Ext.Msg.YES,
icon: Ext.Msg.WARNING
});
}else{
myMask.hide();
Ext.Msg.show({
title:'操作提示',
msg: result.msg,
buttons: Ext.Msg.YES,
icon: Ext.Msg.WARNING
});
}
},
failure: function (response, opts) {
Ext.Msg.show({
title:'操作提示',
msg: '修改失败',
buttons: Ext.Msg.YES,
icon: Ext.Msg.WARNING
});
}
})
};
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-Extjs4 RowEditing 的使用和更新方法全部内容，希望文章能够帮你解决javascript代码实例教程-Extjs4 RowEditing 的使用和更新方法所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。