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

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

扩展行编辑插件并更改插入数据的方式。在插入重载数据的当前页面后说... ...
从使用缓冲存储切换到使用网格的bufferedrenderer插件。您可以在此处找到此插件的快速概述：bufferedrenderer
做一些更深入的研究，可能有一个解决方案，即使没有消除缓冲商店。

我的情况我会选择第二种方式，除非我在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);
                      }
                 });                     
            }
        });
    }
}],

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

Answer 3

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

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

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

3 个答案: