上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录。苦于抽不出时间，一直拖到现在。不得不说，Extjs确实很强大，新版的Neptune风格也很入我眼，但毕竟没怎么用过，第一次用，也不敢上来就搞什么自定义组件，也就纯粹的model+store+panel声明式创建表格了。
抛开分页，抛开排序，今天只简单讲一下最近使用中总结出来的rest形式增删改查数据的方式。发现这种方式挺不错的，故而分享下。
代码Example如下：
定义Model
01.Ext.define('Person', {
02.extend:'Ext.data.Model',
03.fields: [{name:'id',
04.type:'int',
05.useNull:true
06.},'email','first','last'],
07.validations: [{ type:'length',
08.field:'email',
09.min: 1
10.}, {type:'length',
11.field:'first',
12.min: 1
13.}, {type:'length',
14.field:'last',
15.min: 1
16.}]
17.});
构造store、创建panel
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:'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.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 it
044.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:'id'
065.}, {
066.text:'Email',
067.flex: 1,
068.sortable:true,
069.dataIndex:'email',
070.field: {
071.xtype:'textfield'
072.}
073.}, {
074.header:'First',
075.width: 80,
076.sortable:true,
077.dataIndex:'first',
078.field: {
079.xtype:'textfield'
080.}
081.}, {
082.text:'Last',
083.width: 80,
084.sortable:true,
085.dataIndex:'last',
086.field: {
087.xtype:'textfield'
088.}
089.}],
090.dockedItems: [{
091.xtype:'toolbar',
092.items: [{
093.text:'Add',
094.iconCls:'icon-add',
095.handler:function(){
096.// empty record
097.store.insert(0,new Person());
098.rowEditing.startEdit(0, 0);
099.}
100.},'-', {
101.itemId:'delete',
102.text:'Delete',
103.iconCls:'icon-delete',
104.disabled:true,
105.handler:function(){
106.var selection = grid.getView().getSelectionModel().getSelection()[0];
107.if (selection) {
108.store.remove(selection);
109.}
110.}
111.}]
112.}]
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，如：
1.listeners: {
2.beforeload:function(proxy, response, operation){
3.
4.}
5.}
3、后台动态构造表头不能设置renderer
由于业务特殊性，我们在后台构造json对象包装extjs grid所需的fields、columns，也正因此，不能在后台设置renderer等调用js函数的属性，我的解决方式是，后台添加固定标识，数据到前台后遍历添加所需renderer函数或者特殊编辑器等
后台交互
与后台的交互在一开始还是纠结了半天，没看清楚extjs的实现，原来使用这种方式的请求除了扩展参数以外，表格数据都是通过流交互的。这个在后台是不能直接使用request.getParamter(“xxx”);获取的，因为是使用流，所以需要通过get请求的流来读取数据，又因为是文本数据，所以直接request.getReader().readerLine();获取到的就是json格式的字符串了，接下来就需要自己根据需要进行转换了，个人还是使用json.simple，当然了，具体情况具体对待，如果你的数据有其他的比如文件上传之类的，就需要先获取inputstream再解析了。
就总结这么多了，有任何问题，欢迎留言交流
198
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
