Ext4 grid添加，删除，修改记录demo
本示例只提供Ext4 grid添加，删除，修改记录demo前端javascript代码，自己参考代码Ext.data.Model编写动态页返回的json数据，如果修改过Ext.data.Model，记得修改返回的json结构。
本示例接受的ｊｓｏｎ数据结构
{"totalCount":2,"success":true,"data":[
{"Sno":"Sno1", "name":"name1", "password":"password1", "gender":"gender1", "humanId":"humanId1", "phone":"phone1", "address":"address1", "email":"email1"},
{"Sno":"Sno2", "name":"name2", "password":"password2", "gender":"gender2", "humanId":"humanId2", "phone":"phone2", "address":"address2", "email":"email2"}
//....
]}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext4 grid添加，删除，修改记录demo</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../shared/example.css" />
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
Ext.define('Student', {
extend: 'Ext.data.Model',
fields: ['Sno', 'name', 'password', 'gender', 'humanId', 'phone', 'address', 'email']
});
var store = new Ext.data.Store({
model: 'Student',
proxy: {
type: 'ajax',
url: '数据源url地址',
reader: {
root: 'data',
create: function () { },
totalProperty: 'totalCount'
}
}
});
store.load();
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false,
listeners: {
canceledit: function (editor, e, eOpts) {//取消则删除添加的行
e.store.remove(e.record);
},
edit: function (editor, e, eOpts) {//点击update事件，ajax提交到动态页保存起来
Ext.Ajax.request({
url: 'xxxxxxxxxxx', //动态页地址
params: e.record.getData(), ////////
requestcomplete: function (conn, response, options, eOpts) {
//动态页成功保存输出1就行了，不要输出其他的内容
if (response.responseText == '1') e.record.commit(); //提交更改，要不修改过值的单元格会显示一个红色的提示
else alert('保存失败\n' + response.responseText);
},
requestexception: function (conn, response, options, eOpts) { alert('动态页有问题！\n' + response.responseText); }
});
}
}
});
var gridPanel1 = Ext.create('Ext.grid.Panel', {
title: '学生信息表',
store: store,
height: 350, id: 'panel',
columnLines: true,
columns: [{
xtype: 'rownumberer', width: 20
}, {
text: '学号',
dataIndex: 'Sno', flex: 1,
editor: {
xtype: 'textfield'
}
}, {
text: '姓名',
dataIndex: 'name', flex: 1,
editor: {
xtype: 'textfield'
}
}
, {
text: '密码',
dataIndex: 'password', flex: 1,
editor: {
xtype: 'textfield'
}
}, {
text: '性别',
dataIndex: 'gender', flex: 1,
editor: {
xtype: 'textfield'
}
}, {
text: '身份证',
dataIndex: 'humanId',
editor: {
xtype: 'textfield'
}
}, {
text: '电话',
dataIndex: 'phone',
editor: {
xtype: 'textfield'
}
}, {
text: '地址',
dataIndex: 'address',
editor: {
xtype: 'textfield'
}
}, {
text: '邮箱',
dataIndex: 'email', flex: 1,
editor: {
xtype: 'textfield'
}
}],
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true,
pageSize: 10
}],
title: 'Employee Salaries',
frame: true,
tbar: [{
text: '添加学生',
handler: function () {
rowEditing.cancelEdit();
var r = Ext.create('Student', {
Sno: 'Sno',
name: 'name',
password: 'password',
gender: 'gender',
humanId: 'humanId',
phone: 'phone',
address: 'address',
email: 'email'
});
store.insert(0, r);
rowEditing.startEdit(0, 0);
}
}, {
itemId: 'removeEmployee',
text: '删除学生',
handler: function () {
var sm = gridPanel1.getSelectionModel();
rowEditing.cancelEdit();
//发送ajax到动态页请求删除数据
Ext.Ajax.request({
url: 'xxxxxxxxxxx', //动态页地址
params: e.record.getData(), ////////
requestcomplete: function (conn, response, options, eOpts) {
//动态页成功保存输出1就行了，不要输出其他的内容
if (response.responseText == '1') {//动态页删除成功，同时删除store中的数据
store.remove(sm.getSelection());
if (store.getCount() > 0) sm.select(0);
}
else alert('删除失败\n' + response.responseText);
},
requestexception: function (conn, response, options, eOpts) { alert('动态页有问题！\n' + response.responseText); }
});
},
disabled: true
}],
plugins: [rowEditing],
listeners: {
'selectionchange': function (view, records) {
gridPanel1.down('#removeEmployee').setDisabled(!records.length);
}
}
});
var item = Ext.create('Ext.container.Viewport', {
layout: 'border',
style: 'padding:10px;',
items: [{
region: 'center',
layout: 'fit',
style: 'padding-top:10px;',
items: [gridPanel1]
}]
});
});
</script>
</head>
<body></body>
</html>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：Ext4 grid添加，删除，修改记录demo