Extjs 4.2 Grid增删改及后台交互.docx

Extjs 4.2 Grid增删改及后台交互(Java)Posted 周二, 07/02/2013 - 12:20 by?admin上次发了EasyuiDatagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录。苦于抽不出时间，一直拖到现在。不得不说，Extjs确实很强大，新版的Neptune风格也很入我眼，但毕竟没怎么用过，第一次用，也不敢上来就搞什么自定义组件，也就纯粹的model+store+panel声明式创建表格了。抛开分页，抛开排序，今天只简单讲一下最近使用中总结出来的rest形式增删改查数据的方式。发现这种方式挺不错的，故而分享下。代码Example如下：定义Modelview sourceprint?01.Ext.define(Person, {02.extend:?Ext.data.Model,03.fields: [{name:?id,04.type:?int,05.useNull:?true06.},?email,?first,?last],07.validations: [{ type:?length,08.field:?email,09.min: 110.}, {type:?length,11.field:?first,12.min: 113.}, {type:?length,14.field:?last,15.min: 116.}]17.});构造store、创建panelview sourceprint?001.var?store = Ext.create(Ext.data.Store, {002.autoLoad:?true,003.autoSync:?true,004.model:?Person,005.proxy: {006.type:?ajax,007.api: {008.read:?url/read,//查询009.create:?url/create,//创建010.update:?url/update,//更新011.destroy:?url/destroy//删除012.},013.reader: {014.type:?json,015.root:?data016.},017.writer: {018.type:?json019.}020.},021.listeners: {022.write:?function(store, operation){023.var?record = operation.getRecords()[0],024.name = Ext.String.capitalize(operation.action),025.verb;026.?027.?028.if?(name ==?Destroy) {029.record = operation.records[0];030.verb =?Destroyed;031.}?else?{032.verb = name +?d;033.}034.Ext.example.msg(name, Ext.String.format({0} user: {1}, verb, record.getId()));035.?036.}037.}038.});039.?040.var?rowEditing = Ext.create(Ext.grid.plugin.RowEditing, {041.listeners: {042.cancelEdit:?function(rowEditing, context) {043.// Canceling editing of a locally added, unsaved record: remove it044.if?(context.record.phantom) {045.store.remove(context.record);046.}047.}048.}049.});050.?051.var?grid = Ext.create(Ext.grid.Panel, {052.renderTo: document.body,053.plugins: [rowEditing],054.width: 400,055.height: 300,056.frame:?true,057.title:?Users,058.store: store,059.iconCls:?icon-user,060.columns: [{061.text:?ID,062.width: 40,063.sortable:?true,064.dataIndex:?id065.}, {066.text:?Email,067.flex: 1,068.sortable:?true,069.d