Extjs 4.2 Grid增删改及后台交互(Java)

上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录。苦于抽不出时间，一直拖到现在。不得不说，Extjs确实很强大，新版的Neptune风格也很入我眼，但毕竟没怎么用过，第一次用，也不敢上来就搞什么自定义组件，也就纯粹的model+store+panel声明式创建表格了。

抛开分页，抛开排序，今天只简单讲一下最近使用中总结出来的rest形式增删改查数据的方式。发现这种方式挺不错的，故而分享下。
代码Example如下：

定义Model

Ext.define('Person', { 
    extend: 'Ext.data.Model', 
    fields: [{name: 'id', 
        type: 'int', 
        useNull: true
    }, 'email', 'first', 'last'], 
    validations: [{ type: 'length', 
        field: 'email', 
        min: 1 
    }, {type: 'length', 
        field: 'first', 
        min: 1 
    }, {type: 'length', 
        field: 'last', 
        min: 1 
    }] 
});

构造store、创建panel

var store = Ext.create('Ext.data.Store', { 
        autoLoad: true, 
        autoSync: true, 
        model: 'Person', 
        proxy: { 
             type: 'ajax', 
             api: { 
                read: 'url/read',//查询 
                create: 'url/create',//创建 
                update: 'url/update',//更新 
                destroy: 'url/destroy'//删除 
            }, 
            reader: { 
                type: 'json', 
                root: 'data'
            }, 
            writer: { 
                type: 'json'
            } 
        }, 
        listeners: { 
            write: function(store, operation){ 
                var record = operation.getRecords()[0], 
                    name = Ext.String.capitalize(operation.action), 
                    verb; 
                      
                      
                if (name == 'Destroy') { 
                    record = operation.records[0]; 
                    verb = 'Destroyed'; 
                } else { 
                    verb = name + 'd'; 
                } 
                Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId())); 
                  
            } 
        } 
    }); 
      
    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', { 
        listeners: { 
            cancelEdit: function(rowEditing, context) { 
                // Canceling editing of a locally added, unsaved record: remove it 
                if (context.record.phantom) { 
                    store.remove(context.record); 
                } 
            } 
        } 
    }); 
      
    var grid = Ext.create('Ext.grid.Panel', { 
        renderTo: document.body, 
        plugins: [rowEditing], 
         400, 
        height: 300, 
        frame: true, 
        title: 'Users', 
        store: store, 
        iconCls: 'icon-user', 
        columns: [{ 
            text: 'ID', 
             40, 
            sortable: true, 
            dataIndex: 'id'
        }, { 
            text: 'Email', 
            flex: 1, 
            sortable: true, 
            dataIndex: 'email', 
            field: { 
                xtype: 'textfield'
            } 
        }, { 
            header: 'First', 
             80, 
            sortable: true, 
            dataIndex: 'first', 
            field: { 
                xtype: 'textfield'
            } 
        }, { 
            text: 'Last', 
             80, 
            sortable: true, 
            dataIndex: 'last', 
            field: { 
                xtype: 'textfield'
            } 
        }], 
        dockedItems: [{ 
            xtype: 'toolbar', 
            items: [{ 
                text: 'Add', 
                iconCls: 'icon-add', 
                handler: function(){ 
                    // empty record 
                    store.insert(0, new Person()); 
                    rowEditing.startEdit(0, 0); 
                } 
            }, '-', { 
                itemId: 'delete', 
                text: 'Delete', 
                iconCls: 'icon-delete', 
                disabled: true, 
                handler: function(){ 
                    var selection = grid.getView().getSelectionModel().getSelection()[0]; 
                    if (selection) { 
                        store.remove(selection); 
                    } 
                } 
            }] 
        }] 
    }); 
    grid.getSelectionModel().on('selectionchange', function(selModel, selections){ 
        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，如：

listeners: { 
    beforeload: function(proxy, response, operation){ 
         
    } 
}

3、后台动态构造表头不能设置renderer
由于业务特殊性，我们在后台构造json对象包装extjs grid所需的fields、columns，也正因此，不能在后台设置renderer等调用js函数的属性，我的解决方式是，后台添加固定标识，数据到前台后遍历添加所需renderer函数或者特殊编辑器等

后台交互
与后台的交互在一开始还是纠结了半天，没看清楚extjs的实现，原来使用这种方式的请求除了扩展参数以外，表格数据都是通过流交互的。这个在后台是不能直接使用request.getParamter(“xxx”);获取的，因为是使用流，所以需要通过get请求的流来读取数据，又因为是文本数据，所以直接request.getReader().readerLine();获取到的就是json格式的字符串了，接下来就需要自己根据需要进行转换了，个人还是使用json.simple，当然了，具体情况具体对待，如果你的数据有其他的比如文件上传之类的，就需要先获取inputstream再解析了。

就总结这么多了，有任何问题，欢迎留言交流