Extjs4 RowEditing 的使用和更新方法
如何灵活快速的掌握RowEditing组件的应用，应大家的要求，今天给大家具体讲下该组件的使用。
1、创建
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing',{
pluginId:'rowEditing',
saveBtnText: '保存',
cancelBtnText: "取消",
autoCancel: false,
clicksToEdit:2 //双击进行修改 1-单击 2-双击 0-可取消双击/单击事件
});
2、定义使用插件
Ext.define('SubBody_Grid', {
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(), {
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
});
}
})
}
}
});
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
});
}
})
};