Ext中实现EditorGridPanel的增删改操作(1)

function fun() {

// 创建选项框
var sm = new Ext.grid.CheckboxSelectionModel();
// 创建表格的列模型
var cm = new Ext.grid.ColumnModel([sm,
// 显示自动编号
new Ext.grid.RowNumberer(), {
header : '编 号',
dataIndex : 'stuid',
align : 'center'
}, {
header : '姓 名',
dataIndex : 'stuname',
align : 'center',
editor : new Ext.form.TextField()
}, {
header : '年 龄',
dataIndex : 'stuage',
align : 'center',
sortable : true,
editor : new Ext.form.TextField()
}, {
header : '班级名称',
dataIndex : 'gradename',
align : 'center',
editor : new Ext.form.TextField()
}, {
header : '班主任',
dataIndex : 'teacher',
align : 'center',
editor : new Ext.form.TextField()
}, {
header : '家庭住址',
dataIndex : 'address',
align : 'center',
editor : new Ext.form.TextField({
align : 'center',
allowBlank : false
})
}]);

// 创建数据装载器
var stustore = new Ext.data.Store({

/*
* proxy : new Ext.data.MemoryProxy(data), reader : new
* Ext.data.ArrayReader({}, [{ name : 'stuid', mapping : 0 }, {
* name : 'stuname', mapping : 1 }, { name : 'sex', mapping : 2 }, {
* name : 'age', mapping : 3 }, { name : 'address', mapping : 4 }, {
* name : 'birth', mapping : 5 }, { name : 'remark', mapping : 6
* }])
*/

// 通过请求创建数据装载器
proxy : new Ext.data.HttpProxy({
url : 'student.do?method=showStudent'
}),

reader : new Ext.data.JsonReader({
totalProperty : 'totalProperty',
root : 'root'
}, [{
name : 'stuid'
}, {
name : 'stuname'
}, {
name : 'stuage'
}, {
name : 'gradename'
}, {
name : 'teacher'
}, {
name : 'address'
}])
});
// 加载数据装载器
stustore.load({
params : {
start : 0,
limit : 4
}
});
// 创建grid表格
// var stugrid=new Ext.grid.GridPanel({
// 实现能动态修改的表格
var stugrid = new Ext.grid.EditorGridPanel({
store : stustore,
cm : cm,
sm : sm,
height : 300,
width : 'auto',
loadMask : true,
stripeRows : true,// 显示斑马线
// 添加工具栏
tbar : new Ext.Toolbar({
items : [{
'text' : '添加',
icon : 'images/add.gif',
iconAlign : 'left',
handler : addStu
}, new Ext.Toolbar.Separator(), {
'text' : '删除',
icon : 'images/del.gif',
iconAlign : 'left',
handler : function() {
// 获取选中的项
var selAtt = sm.getSelections();
if (selAtt.length == 0) {
Ext.Msg.alert("提示", "请选中要删除的记录！");
} else {
Ext.MessageBox.confirm("提示", "您确定要删除该条记录吗？",
function(e) {
if (e == 'yes') {
for (var i = 0; i < selAtt.length; i++) {
Ext.Ajax.request({
url : 'student.do?method=delStudent',
params : {
id : selAtt[i].data.stuid
}
});
}
// 重新装载数据信息
stustore.reload({
params : {
start : 0,
limit : 4
}
});
// 重新刷新grid数据
stugrid.view.refresh();
}
});
}
}
}, new Ext.Toolbar.Separator(), {
'text' : '修改',
icon : 'images/edit.gif',
iconAlign : 'left',
handler : function() {
// 友情提示
// 获取单条修改的信息
// var modified=stustore.modified;;
// 获取所有的修改对象
var modified = stustore.getModifiedRecords();
Ext.Msg.confirm("提示", "您确认修改记录吗?", function(e) {
if (e == 'yes') {
// 定义一个json
var json = [];
for (var i = 0; i < modified.length; i++) {
// 将修改的对象加入到json中
Ext.each(modified[i], function(item) {
json.push(item.data);
})
}
if (json.length > 0) {
Ext.Ajax.request({
url : 'student.do?method=updateStudent',
// 对一个对象、数组或者其它值进行编码
params : {
stuJson : Ext.util.JSON
.encode(json)
},
succuss : function(response) {
Ext.Msg.alert("信息",
response.responseText,
function() {
stustore.load({
params : {
start : 0,
limit : 4
}
});
});
},
failure : function() {
Ext.Msg.alert("信息",
"与后台联系时出现错误！");
}
});
}
}
});
}
}, new Ext.Toolbar.Separator(), {
'text' : '退出',
handler : showCom
}]
}),
// 添加右键菜单
listeners : {
'rowcontextmenu' : function(grid, row, evt) {
evt.preventDefault();// 阻止右键菜单
var menu = new Ext.menu.Menu({
items : [{
'text' : '添加',
icon : 'images/add.gif',
iconAlign : 'left',
handler : addStu
}, {
'text' : '删除'
}, {
'text' : '修改',
icon : 'images/edit.gif',
iconAlign : 'left',
// 友情提示:直接修改单条记录，当鼠标失去焦点就去修改数据信息
// 获取单条修改的信息
handler : function() {
// 获取Store中的记录总数
var count = stustore.getCount();
var record;
// 定义数组，用来存放修改的记录
var array = new Array();
var modified;// 用来存放被修改过的记录的id
var modifiedJSON;// 用来存放被修改的记录字段值的json串
for (var i = 0; i < count; i++) {
record = stustore.getAt(i);

// 如果该条记录被修改过
if (true == record.dirty) {
modified = record.get("stuid");
// 将修改过的值放在一个json字符串中
modifiedJSON = Ext.util.JSON
.encode(record.getChanges());
array.push("'stuid':" + modified
+ "=>" + modifiedJSON);
}
}
Ext.Msg.confirm("提示", "您确认修改记录吗?",
function(e) {
if (e == 'yes') {
Ext.Ajax.request({
url : 'student.do?method=updateOneStudent',
method : 'post',
params : {
// 传递js数组(数组元素‘||’连接，否则直接用Array相当于只传递了个Array[0])
array : array
.join("||")
},
// 回调函数
callback : function(
options,
success,
response) {
var msg = Ext.util.JSON
.decode(response.responseText).msg;
if (msg == true) {
Ext.Msg
.alert(
"提示",
"数据库信息更新成功！");
} else {
Ext.Msg
.alert(
"提示",
"数据库信息更新失败！");
}
// 更新完成后重新加载数据源（除去修改的记录后的"小三角"）
stustore.proxy = new Ext.data.HttpProxy(
{
url : 'student.do?method=showStudent'
});
stustore.load({
params : {
start : 0,
limit : 4
}
});
}

});
}
});
}
}, {
'text' : '退出'
}]
})
// 显示子菜单
menu.showAt(evt.getXY());
}
},
viewConfig : {
forceFit : true
},
// 实现分页显示数据信息
bbar : new Ext.PagingToolbar({
pageSize : 4,
store : stustore,
displayInfo : true,
displayMsg : '显示第{0}条--{1}条记录，共有{2}记录。',
emptyMsg : '没有显示的记录信息！'
})
});

//创建一个window
var win = new Ext.Window({
autoHeight : true,
width : 700,
title : '显示学生信息',
items : [stugrid]
});

//显示窗体信息
win.show();

}