[ExtJs]grid远端分页编辑

在使用gird分页时，一般有两种实现方式：

1. 前端本地分页
2. 远端服务器分页 

当数据体量大时，肯定第二种方法优先，但是当使用了远端分页后，在进行编辑时，对于数据的保存就要特殊处理下了。

具体实现效果如下：

实现思路：

由于表格在进行切页时，数据会从服务端重新拉取，并重新渲染到前端store。

所以，在切页时需要将当前页改变的内容存储下来，保存到一个中介位置，等用户切回此页时，再把编辑的内容放入。

实现代码参考： 

1.首先在开启编辑时动态监听store的载入事件，并创建一个内存store 用于存储数据

startEdit() {
    const me = this,
    store = me.getStore();  
    me.memoryStore = new Ext.data.Store({proxy:{type:'memory'}});//借助内存用于保存编辑的数据
    store.addListener('beforeload', 'beforeDataLoad', me);//监听数据载入之前的事件
    store.addListener('load', 'afterDataLoad', me);//监听数据载入的事件
}

2.在数据载入前，将当前数据里的改动值存入到 内存store中

beforeDataLoad(store, opts) {
    //store对象.getUpdatedRecords()即可获取有变动的record对象
    this.memoryStore.add(store.getUpdatedRecords());
}

ps:关于获取store里的变动值，有三种类型的获取：

1. getRejectRecords=>获取新增的数据  
2. getUpdatedRecords=>获取变更的数据
3. getRemovedRecords=>获取删除的数据 

上面的三类获取方法，都是基于数据保存在前端的，store还未接收真正change前

3.在新的页面渲染数据时，把之前存在内存store变量里的相关行数据重新塞入

afterDataLoad(store, records, success, opts) {
    const me = this;
    let memoryStore = me.memoryStore;
    //获取之前的更新的内容
    records.forEach(rec=> {
        // 注意store要声明idProperty 指明主键字段是数据的哪个key!!!
        let oldRec = memoryStore.getById(rec.getId());//使用id获取
        if(oldRec)
        rec.set(oldRec.data);
    });
}

4.最后在结束编辑时，将动态监听的事件移除，同时销毁内存store

cancelEdit() {
    const me = this,
    store = me.getStore();
    store.removeListener('beforeload', 'beforeDataLoad', me);//移除相关监听的事件
    store.removeListener('load', 'afterDataLoad', me);
    me.memoryStore.destroy();
    store.rejectChanges();//使用拒绝结束改动恢复store的原有数据
}

一个完整Demo:表格分页编辑JS参考Demo