extjs4mvc增删改查_EXTJS 4.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

}

},

{

icon: '/images/delete.gif',

toolTip: 'Delete',

text: '删除',

xtype: 'actioncolumn',

width: 120,

sortable: false,

handler: function (grid, rowIndex) {

var memberId = grid.getRecord(rowIndex).raw.MemberId;

grid.getStore().removeAt(rowIndex);

}

}

],

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

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: "详细信息",

width: 500,

height: 300,

collapsible: false,

resizable: false,

closeAction: 'hide',

items: [],

html: Ext.get('tt').dom.innerHTML,

modal: true

});

Ext.get('tt').show();

extWin.show();

}

}

});

})

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

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

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

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

最终结果显示为：