EXTJS 4.2.0.663: buffer storage with editor grid

Question

Buffered storage with editor grid.

We used version 4.1.1 and go to 4.2.0.663. We have editorial grids with buffered stores that contain a large amount of data. Editing grids are similar to the line editing example (except that it uses buffer storage). But the add function for the grid stopped after the migration, and it causes an error.

Ext.Error: the insert operation is not supported in the buffer storage.

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: ' [e-mail] ', start: Ext.Date.clearTime(new Date()), salary: 50000, active: true }); store.insert(0, r); rowEditing.startEdit(0, 0); } }], plugins: [rowEditing], }); 

Please indicate which approach should be followed.

Answer 1

There is a similar problem with the line editing plugin. This problem appears to be related to buffered internal storages that have been modified. To solve this problem, you can:

• Extend the row editing plugin and change the way you insert data. Say after inserting a reload of the current data page or so ...
• Switch from buffered storage to use the bufferedrenderer plugin for the grid. A quick overview of this plugin can be found here: bufferedrenderer
• Do some more in-depth research, maybe there is a solution, even without exception, buffered stores.

In my case, I’m going to choose the second method, if I don’t specify everything with changes in buffered stores in ExtJs 4.2 ...

UPDATE: It seems that buffered stores have limited functionality in 4.2. And they still do not work. Take this problem now: fix bug

Answer 2

I also had a problem after switching to Ext Js 4.2. I solved this by creating a temporary copy of the buffered storage without buffering. For your code, it will look like this:

 tbar: [{ handler : function() { rowEditing.cancelEdit(); // Create a model instance var r = Ext.create('Employee', { name: 'New Guy', email: ' [e-mail] ', 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 // eg store.data.clear(); store.load({ success: function() { grid.view.bufferedRenderer.scrollTo(args.response.indexOfNewRecord, true); rowEditing.startEdit(0, 0); } }); } }); } }], 

what is missing is the definition of the index. I get it in a synchronization response from my web service, so I can go to the index position in the general dataset.

Answer 3

It should be noted that although the workaround for creating an unbuffered storage works fine when you can do it using code, there are some grid editing elements where you do not get this opportunity - for example, using a cell or row editing plugins on a grid with buffered storage is no longer work in 4.2.

As a result, we returned to 4.1 to restore the functions of the buffered storage, and we will monitor what will happen in future versions of ExtJS before updating. I suggest that anyone who uses buffered storage on large remote databases (where you cannot accept reading the entire database while the page loads), carefully consider update 4.2.