资源描述：
《Extjs 4.2 Grid增删改及后台交互》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、Extjs4.2Grid增删改及后台交互(Java)Posted周二,07/02/2013-12:20by admin上次发了EasyuiDatagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录。苦于抽不出时间，一直拖到现在。不得不说，Extjs确实很强大，新版的Neptune风格也很入我眼，但毕竟没怎么用过，第一次用，也不敢上来就搞什么自定义组件，也就纯粹的model+store+panel声明式创建表格了。抛开分页，抛开排序，今天只简单讲一下最近使用中总结出来的rest形式增删改查数据的方式。发现这种方式挺不错的，故而分享下
2、。代码Example如下：定义Modelviewsourceprint?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.},{ty
3、pe: 'length',14.field: 'last',15.min:116.}]17.});构造store、创建panelviewsourceprint?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: 'ur
4、l/update',//更新011.destroy: 'url/destroy'//删除012.},013.reader:{014.type: 'json',015.root: 'data'016.},017.writer:{018.type: 'json'019.}020.},021.listeners:{022.write: function(store,operation){023.var record=operation.getRecords()[0],024.name=Ext.String.capitalize(operation.action),025.v
5、erb;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.RowE
6、diting',{041.listeners:{042.cancelEdit: function(rowEditing,context){043.//Cancelingeditingofalocallyadded,unsavedrecord:removeit044.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.bo
7、dy,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: 'id'065.},{066.text: 'Email',067.flex:1,068.sortable: true,069.dataIn
