Extjs4---用RowEditing对数据进行增加,修改
来源:互联网 发布:网络信息安全标语 编辑:程序博客网 时间:2024/06/07 06:23
给grid添加RowEditing:
[javascript]
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
pluginId:'rowEditing',
saveBtnText: '保存',
cancelBtnText: "取消",
autoCancel: false,
clicksToEdit:2<span style="white-space:pre"> </span>//双击进行修改
})
然后在grid里面配置即可:
[javascript]
plugins: [
rowEditing
],
1、增加:
给“增加”添加点击事件,点击时,在store中添加一个新的record,并调用startEdit(0,0)方法,参数表示编辑第一行,也就是刚添加的新行
[javascript]
'center button[id = addContact]':{
click:function(){
//得到通讯录的store,并添加一个新的空行
var contactStore = Ext.getStore('ContactStore');
var contactModel = Ext.create('MS.model.Contact',{});
contactStore.insert(0,contactModel);
//得到rowEditing添加事件
var rowEditing = Ext.getCmp('contactGridpanel').editingPlugin;
rowEditing.startEdit(0,0);
}
},
然后在输入信息即可
2、修改:
当点击“修改”时,找到选择的列,或者双击某列时进行修改
[javascript]
'center button[id = updateContact]':{
click:function(){
//得到rowEditing添加事件
var rowEditing = Ext.getCmp('contactGridpanel').editingPlugin;
var data = Ext.getCmp("contactGridpanel").getSelectionModel().getSelection();
if(data.length == 0) {
Ext.MessageBox.alert(
'提示',
'请在您要修改的行前面打勾,或者直接双击您想修改的行!'
);
}else{
rowEditing.startEdit(data[0].index,0);
}
}
},
3、保存
不管是添加还是修改,保存用的事件是grid的edit事件
[javascript]
edit:function(editor,e,eOpts){
// "添加" 当id为空时,表示添加新的联系人
if(id == ''){
//执行操作
var myMask = new Ext.LoadMask(Ext.getBody(), {
msg: '正在添加,请稍后...',
removeMask: true //完成后移除
});
myMask.show();
//获取uuid
var id = UUID.prototype.createUUID();
//获取record
var formData = e.record.getData();
Ext.Ajax.request({
url: 'add',
params: {
id:id
//参数
},
success: function(response){
var result = Ext.decode(response.responseText).result;
if(result.succeed){
e.record.set(id,uuid);
//页面效果,提交数据
e.record.commit();
//重新排序,防止出现错位现象
Ext.getStore('ContactStore').sort('id', 'DESC');
//隐藏等待提示框
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
});
}
}
});
}else{
// "修改" 当id不为空时,表示修改联系人信息
var myMask = new Ext.LoadMask(Ext.getBody(), {
msg: '正在修改,请稍后...',
removeMask: true //完成后移除
});
myMask.show();
var formData = e.record.getData();
Ext.Ajax.request({
url: 'update',
params: {
id:formData.id
},
success: function(response){
var result = Ext.decode(response.responseText).result;
if(result.succeed){
e.record.commit();
Ext.getStore('ContactStore').sort('id', 'DESC');
//隐藏
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
});
}
}
})
}
}
},
- Extjs4---用RowEditing对数据进行增加,修改
- Extjs4---用RowEditing对数据进行增加,修改
- JAVA+JDBC对数据库的数据进行增加、修改、删除、查询等操作
- ExtJs4.1 RowEditing时新增取消自动删除该行 + 判断是新增 还是 修改
- 用jQuery—ui对表格进行修改数据
- 用RDO链接数据库,对数据库进行增加、删除、修改的操作
- Extjs4 RowEditing 的使用和更新方法
- 3.对数据进行修改操作
- MVC4.0 JSON JsonResult 序列化之后 对JSON 进行修改 EXTJS4.0 分页
- 使用c#进行数据库的查看增加修改删除数据
- GridView DropDownList 数据 绑定 RowEditing
- Extjs4.2.1 Ext.grid.plugin.RowEditing 保存按钮不可用
- ExtJS4.2学习基于表格的扩展插件---rowEditing
- 动态修改Extjs4 EditGrid中的数据
- C#对DataGridView中的数据进行添加、修改、删除操作
- 对DataGridView进行添加、修改、删除数据操作----C#
- 33.对学生结构体的数据进行修改
- C#对DataGridView进行添加、修改、删除数据操作
- 我国中学物理老师在广义相对论和量子宇宙学方面的一篇文章
- Flex 4中如何创建不可编辑NumericStepper的例子
- DES加密算法C实现
- NSCharacterSet使用方法
- 『算法学习笔记』24th day. 字符数组
- Extjs4---用RowEditing对数据进行增加,修改
- Nodejs基础中间件Connect
- 中国电信张鹏:高速移动互联网发展趋势
- 【※】非限定宽度横向滚动应用实例(DIV + CSS、鼠标拖动)
- 求最大公约数
- 纯css实现回旋动画
- Java闭包
- 修改Eclipse/MyEclipse项目的编码格式
- Ubuntu 12.04 LTS安装VMware Tools无法找到kernel header path的问题 (转