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

Extjs 4.2 Grid增删改及后台交互(Java)Posted 周二, 07/02/2013 - 12:20 byadmin上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于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.varstore = 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.varrecord = operation.getRecords()0,024.name = Ext.String.capitalize(operation.action),025.verb;026.027.028.if(name =Destroy) 029.record = operation.records0;030.verb =Destroyed;031.else032.verb = name +d;033.034.Ext.example.msg(name, Ext.String.format(0 user: 1, verb, record.getId();035.036.037.038.);039.040.varrowEditing = 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.vargrid = 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.dataIndex:email,070.field: 071.xtype:textfield072.073., 074.header:First,075.width: 80,076.sortable:true,077.dataIndex:first,078.field: 079.xtype:textfield080.081., 082.text:Last,083.width: 80,084.sortable:true,085.dataIndex:last,086.field: 087.xtype:textfield088.089.,090.dockedItems: 091.xtype:toolbar,092.items: 093.text:Add,094.iconCls:icon-add,095.handler:function()096./ empty record097.store.insert(0,newPerson();098.rowEditing.startEdit(0, 0);099.100.,-, 101.itemId:delete,102.text:Delete,103.iconCls:icon-delete,104.disabled:true,105.handler:function()106.varselection = grid.getView().getSelectionModel().getSelection()0;107.if(selection) 108.store.remove(selection);12.113.);114.grid.getSelectionModel().on(selectionchange,function(selModel, selections)115.grid.down(#delete).setDisabled(selections.length = 0);很简单，使用api的方式，包括有增删查改，在前台的操作都会被extjs记录下来，再执行sync的时候就可以自动根据状态请求相应的url了。下面是使用中遇到的一些小问题总结。1、删除多行数据例子里使用的是var selection = grid.getView().getSelectionModel().getSelection()0;注意是加了个0的，所以要删除多行，直接取消这个0，然后执行store即可，前提是你的表格没有限制只能选取一行，默认情况下，cellmodel的mode值为SINGLE，使用checkboxmodel就可以显示checkbox的同时实现多选了。2、增删查改的同时进行传参这个一开始同事懒得研究就直接在url里拼上去了，我觉得这样不妥，就查了下相关文章，最终得到两种实现方法方法一：仅在查询时可用，设置store的autoload为false，手动载入store.load(/to do something);，这样使用查询是可以但是修改删除或者更新时就不好用了。于是有了方法二；方法二：添加事件监听，在store里面设置linstener，监听beforeload时执行方法，设置Param，如：view sourceprint?1.listeners: 2.beforeload:function(proxy, response, operation)、后台动态构造表头不能设置renderer由于业务特殊性，我们在后台构造json对象包装extjs grid所需的fields、columns，也正因此，不能在后台设置renderer等调用js函数的属性，我的解决方式是，后台添加固定标识，数据到前台后遍历添加所需renderer函数或者特殊编辑器等后台交互与后台的交互在一开始还是纠结了半天，没看清楚extjs的实现，原来使用这种方式的请求除了扩展参数以外，表格数据都是通过流交互的。这个在后台是不能直接使用request.getParamter(“xxx”);获取的，因为是使用流，所以需要通