EXTJS4.0+MVC表格基础实例(分页查询，修改和删除)

来源：互联网发布：网络创业靠谱吗编辑：程序博客网时间：2024/04/30 18:09

EXTJS4.0+MVC表格基础实例(分页查询，修改和删除)

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", width: 120, dataIndex: 'MemberId', sortable: true },

　　 { text: "MemberName", width: 120, dataIndex: 'MemberName', sortable: true,

　　　　 editor: {

　　　　 xtype: 'textfield',

allowBlank: false //不允许为空

　　　　　　 }

{ text: "Email", width: 120, dataIndex: 'Email', sortable: true,

　　 editor: {

　　　　　　　　　　 xtype: 'textfield',

　　　　　　　　　　 allowBlank: false

　　　　　　　　　　　　　 }

height: 400,

width: 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) {

　　　　 Ext.MessageBox.alert('信息提示');

　　　　　　　　　　　　 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) {

　　　　 Ext.MessageBox.alert('信息提示');

　　　　　　 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) {

　　 Ext.MessageBox.alert('信息提示');

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);

　　　　　　　　 }

　　　　 });

})

</script>

后台数据处理部分是用MVC处理的

添加和修改比较简单，删除是批量删除，只需spit即可

最主要的部分就是分页显示

注意：默认请求时GET请求，所以GetAll()前缀是[HttpGet]；虽然MVC中自带Json()序列化对象，但谨慎使用，最后输出格式为Json格式的字符串即可。

最终结果显示为：