Extjs4 RowEditing 的使用和更新方法
2013-09-05 19:23
344 查看
如何灵活快速的掌握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、定义时不定义,之后进行再添加[b]事件的方式[/b]
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
});
}
})
};
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、定义时不定义,之后进行再添加[b]事件的方式[/b]
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
});
}
})
};
相关文章推荐
- Extjs4 RowEditing 的使用和更新方法
- Extjs4 RowEditing 的使用和更新方法
- Android的消息机制,用Android线程间通信的Message机制,Android中Handler的使用方法——在子线程中更新界面,handler机制
- 直接使用提交过来的类来更新字段EntityState.Modified并过滤null值的方法
- 版本更新的使用方法
- Date获得当前时间,后获得年月日的方法,已经不在被经常使用,需要更新了
- Python:Python中较使用的一些方法(持续更新)
- 网站后台登录aspcms 提示错误号:-2147467259,错误描述:操作必须使用一个可更新的查询。sql=update AspCms_Content set TimeStatus=0 where TimeStatus=1 and Timeing <= 解决方法。
- 无法使用此Apple ID 进行更新的解决方法
- 多媒体编解码学习: ffmpeg(更新ffmpeg库使用方法)
- C#使用SqlDataAdapter的Update方法更新数据
- RedHat6.3使用CentOS YUM源更新的方法
- ECG在DbCore使用实体更新Access数据库的时候返回值为0时的问题解决方法
- 关于Entity Framework更新的几种方式以及可能遇到的问题(附加类型“Model”的实体失败,因为相同类型的其他实体已具有相同的主键值)在使用 "Attach" 方法或者将实体的状态设置为 "Unchanged" 或 "Modified" 时如果图形中的任何实体具有冲突键值,则可能会发生上述行为
- 使用新的方法来实现SharePoint网站日志更新
- Asp.net使用异步缓存方法实现页面及时更新
- Android的消息机制,用Android线程间通信的Message机制,Android中Handler的使用方法——在子线程中更新界面,handler机制
- hibernate使用注解无法进行更新操作的解决方法
- android sdk sdkmanger无界面使用方法(命令行更新SDK)
- Linux svn使用方法杂记(持续更新...)