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

Question

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

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

Ext.Error: insert operation not supported into buffered Store.

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插件。这个插件的快速浏览你可以在这里找到：bufferedrenderer
3. 做一些更深入的研究，可能有一个解决方案，即使没有消除缓冲的商店。

我我的情况下，我会选择第二种方式，除非我在ExtJS的4.2缓冲存储的变化澄清一切......

UPDATE：看来，缓冲专卖店在4.2有限functionalty。他们仍然是越野车。现在有这个问题：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服务中获取同步响应，因此我可以滚动到总共数据集中的索引位置。

Answer 3

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

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