EXTJS 4.2.0.663：带有编辑器网格的缓冲存储

Question

带有编辑器网格的缓冲存储。

我们一直在使用 4.1.1 版本，并且正在迁移到 4.2.0.663。我们有带有缓冲存储的编辑器网格，其中包含大量数据。编辑器网格类似于行编辑示例（除了它使用缓冲存储）。但是网格的添加功能在迁移后已停止并引发错误

Ext.Error: 缓冲存储不支持插入操作。

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToMoveEditor: 1,
        autoCancel: false
    });
// create the grid and specify what field you want
// to use for the editor at each column.
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [{
        header: 'Name',
        dataIndex: 'name',
        flex: 1,
        editor: {
            // defaults to textfield if no xtype is supplied
            allowBlank: false
        }
    }, {
        header: 'Email',
        dataIndex: 'email',
        width: 160,
        editor: {
            allowBlank: false,
            vtype: 'email'
        }
    }, {
        xtype: 'datecolumn',
        header: 'Start Date',
        dataIndex: 'start',
        width: 90,
        editor: {
            xtype: 'datefield',
            allowBlank: false,
            format: 'm/d/Y',
            minValue: '01/01/2006',
            minText: 'Cannot have a start date before the company existed!',
            maxValue: Ext.Date.format(new Date(), 'm/d/Y')
        }
    }, {
        xtype: 'numbercolumn',
        header: 'Salary',
        dataIndex: 'salary',
        format: '$0,0',
        width: 90,
        editor: {
            xtype: 'numberfield',
            allowBlank: false,
            minValue: 1,
            maxValue: 150000
        }
    }, {
        xtype: 'checkcolumn',
        header: 'Active?',
        dataIndex: 'active',
        width: 60,
        editor: {
            xtype: 'checkbox',
            cls: 'x-grid-checkheader-editor'
        }
    }],
    renderTo: 'editor-grid',
    width: 600,
    height: 400,
    title: 'Employee Salaries',
    frame: true,
    tbar: [{
        text: 'Add Employee',
        iconCls: 'employee-add',
        handler : function() {
            rowEditing.cancelEdit();

            // Create a model instance
            var r = Ext.create('Employee', {
                name: 'New Guy',
                email: 'new@sencha-test.com',
                start: Ext.Date.clearTime(new Date()),
                salary: 50000,
                active: true
            });

            store.insert(0, r);
            rowEditing.startEdit(0, 0);
        }
    }],
    plugins: [rowEditing],
});

请告知要遵循的方法。

Answer 1

行编辑插件也有类似的问题。看起来这个问题与已更改的缓冲存储内部结构有关。要解决此问题，您可以：

1. 扩展行编辑插件并更改插入数据的方式。插入后说重新加载当前页面的数据左右...
2. 从使用缓冲存储切换到对网格使用缓冲渲染器插件。您可以在此处找到此插件的快速概览：bufferedrenderer
3. 做一些更深入的研究，即使不消除缓冲存储也可能有解决方案。

在我的情况下，我将选择第二种方式，除非我通过 ExtJs 4.2 中缓冲存储的更改来澄清所有内容...

更新：似乎缓冲存储在 4.2 中的功能有限。他们仍然是越野车。现在有这个问题：commit bug

Answer 2

迁移到 Ext Js 4.2 后，我也遇到了这个问题。我通过在没有缓冲的情况下创建缓冲存储的临时副本来解决它。应用于您的代码，这将如下所示：

tbar: [{
    handler : function() {
        rowEditing.cancelEdit();

        // Create a model instance
        var r = Ext.create('Employee', {
            name: 'New Guy',
            email: 'new@sencha-test.com',
            start: Ext.Date.clearTime(new Date()),
            salary: 50000,
            active: true
        });

        var storeClassName = Ext.getClassName(store);
        var tempStore = Ext.create(storeClassName, { buffered: false });
        tempStore.add(r);
        tempStore.sync({
            success: function(args) {
                 // reload your grid and scroll to the position of the new record 
                 // e.g.
                 store.data.clear();
                 store.load({
                      success: function() {
                           grid.view.bufferedRenderer.scrollTo(args.response.indexOfNewRecord, true);
                           rowEditing.startEdit(0, 0);
                      }
                 });                     
            }
        });
    }
}],

缺少的是索引的定义。我从我的网络服务的同步响应中得到它，所以我可以滚动到 total 数据集中的索引位置。

Answer 3

需要注意的一点是，虽然创建无缓冲存储的解决方法在您可以通过代码执行时非常有效，但在网格编辑的某些元素中您没有这个机会 - 例如，使用单元格或具有缓冲存储的网格上的行编辑插件在 4.2 中不再适用。

最后，我们最终回到了 4.1 以重新获得缓冲存储功能，并将在再次升级之前监控未来 ExtJS 更新中发生的情况。我建议任何在大型远程数据库上使用缓冲存储的人（您不能接受在页面加载期间读取整个数据库）仔细考虑 4.2 升级。