<script type="text/javascript">
Ext.require([ 'Ext.grid.*', 'Ext.data.*' ]);
Ext.onReady(function () {
Ext.define('Member', {
extend: 'Ext.data.Model',
fields: [ //第一个字段需要指定mapping，其他字段，可以省略掉。
{name: 'MemberId', mapping: 'MemberId' }, 'MemberName', 'Email' ]
});
//创建数据源
var store = Ext.create('Ext.data.Store', {
pageSize: 10,
model: 'Member',
remoteSort: true, //设置服务端上分页
proxy: { //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可，默认是GET请求
type: 'ajax',
url: 'Home/GetAll',
reader: {
type: 'json',
root: 'items', //数据
totalProperty: 'totalCount' //总数量
},
simpleSortMode: true
},
autoLoad: true,
pruneModifiedRecords: true
});
//新增一行
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1
});
//创建Grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
autoWidth: true,
columns: [
{ text: "MemberId", 120, dataIndex: 'MemberId', sortable: true },
{ text: "MemberName", 120, dataIndex: 'MemberName', sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false //不允许为空
}
},
{ text: "Email", 120, dataIndex: 'Email', sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
icon: '/images/delete.gif',
toolTip: 'Delete',
text: '删除',
xtype: 'actioncolumn',
120,
sortable: false,
handler: function (grid, rowIndex) {
var memberId = grid.getRecord(rowIndex).raw.MemberId;
grid.getStore().removeAt(rowIndex);
}
}
],
height: 400,
480,
x: 20,
y: 40,
title: 'ExtJS4 Grid基础示例',
frame: true,
clicksToEdit: 1,
selType: 'rowmodel', //设置行选择模式
loadMask: true,
renderTo: Ext.getBody(),
viewConfig: { stripeRows: true },
selModel: Ext.create('Ext.selection.CheckboxModel'),
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
emptyMsg: "没有数据"
}),
tbar: [{
text: '新增用户',
handler: function () {
rowEditing.cancelEdit();
var v = Ext.create('Member', {
MemberId: '', MemberName: '', Email: ''
});
store.insert(0, v);
rowEditing.startEdit(0, 0);
}
},
{
itemId: 'del',
text: '删除用户',
handler: function () {
if (confirm('确认要删除吗?')) {
var sm = grid.getSelectionModel();
var bb = sm.getSelection();
var memberId = '';
for (var i = 0; i < bb.length; i++) {
memberId += bb[i].get("MemberId") + ",";
}
Ext.Ajax.request({
url: 'Home/Delete',
method: 'POST',
params: { memberId: memberId },
waitMsg: '操作执行中，请稍后...',
success: function (response, opts) {
rowEditing.cancelEdit();
grid.getStore().load();
}
});
}
}
}, {
text: '保存',
handler: function () {
var v = grid.store.getModifiedRecords();
for (var i = 0; i < v.length; i++) {
var memberId = v[i].data.MemberId;
var memberName = v[i].data.MemberName;
var email = v[i].data.Email;
if (memberId == null || memberId == "" || memberId == undefined) {
//数据添加
Ext.Ajax.request({
url: 'Home/Add',
method: 'POST',
params: { memberName: memberName, email: email },
waitMsg: '操作中，请稍后',
success: function (response, opts) {
rowEditing.cancelEdit();
grid.getStore().load();
}
});
}
else {
//数据修改
Ext.Ajax.request({
url: 'Home/Update',
method: 'POST',
params: { memberId: parseInt(memberId), memberName: memberName, email: email },
waitMsg: '操作执行中，请稍后',
success: function (response, opts) {
rowEditing.cancelEdit();
grid.getStore().load();
},
failure: function (response, opts) {
alert(response.responseText);
}
});
}
}
}
}],
plugins: [rowEditing],
listeners: {
//设置未选中时删除菜单禁用
'selectionchange': function (view, records) {
grid.down('#del').setDisabled(!records.length);
},
'itemdblclick': function (val, rowIndex, e) {
//也可双击进行编辑
var memberId = rowIndex.raw.MemberId;
//定义弹出窗体层
var extWin = new Ext.Window({
title: "详细信息",
500,
height: 300,
collapsible: false,
resizable: false,
closeAction: 'hide',
items: [],
html: Ext.get('tt').dom.innerHTML,
modal: true
});
Ext.get('tt').show();
extWin.show();
}
}
});
})
</script>
后台数据处理部分是用MVC处理的
添加和修改比较简单，删除是批量删除，只需spit即可
最主要的部分就是分页显示
注意：默认请求时GET请求，所以GetAll()前缀是[HttpGet]；虽然MVC中自带Json()序列化对象，但谨慎使用，最后输出格式为Json格式的字符串即可。
最终结果显示为：
