4

Buffered Store with editor grid.

We have been using version 4.1.1 and are migrating to 4.2.0.663. We have editor grids with buffered stores which contain large volume of data. The editor grids are similar to the row-editing example(except that it uses buffered store). But the add functionality for the grid has stopped after migration and it raises an error

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],
});

Please advise on what is the approach to be followed.

Ankur
  • 5,086
  • 19
  • 37
  • 62
Navya R
  • 615
  • 1
  • 10
  • 16

3 Answers3

2

Have similar problem with row editing plugin. It looks like this problem is related to buffered store internals which were changed. To solve this issue you can:

  1. Extend row editing plugin and change the way you insert data. Say after inserting reload current page of the data or so...
  2. Switch from using buffered store to using bufferedrenderer plugin for the grid. The quick overview of this plugin you can find here: bufferedrenderer
  3. Do some deeper research, probably there is a solution even without eliminating buffered stores.

I my case I'm going to choose second way unless I clarify everything with changes in buffered stores in ExtJs 4.2...

UPDATE: It appears that buffered stores have limited functionalty in 4.2. And they are still buggy. Have this problem now: commit bug

alsid
  • 490
  • 6
  • 14
  • Ext Js offers many bugfixes, they especially [fixed many buffered store bugs](http://cdn.sencha.com/ext/beta/4.2.1.744/release-notes.html) – Christoph Jun 17 '13 at 11:37
2

I also had this problem after migration to Ext Js 4.2. I solved it by creating a temporary copy of the buffered store without buffering. Applied to your code this would look like this:

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);
                      }
                 });                     
            }
        });
    }
}],

what is missing is the definition of the index. I get it in the sync response from my web service, so I can scroll to the position of the index in the total dataset.

Christoph
  • 1,023
  • 11
  • 23
  • there is an beforeeedit event in Ext.grid.plugin.EditingView. Maybe you can add a handler to this event and exchange the store right before? – Christoph Jun 17 '13 at 11:40
  • can you please add some more code for clarity? I am not able to exchange the store before insert as mentioned here. – Navya R Jul 17 '13 at 11:59
  • updated the answer. What I missed until now is that you also want to update the grid I guess. – Christoph Jul 17 '13 at 12:57
  • Thanks for the answer. But is there no way other than saving the record on add? – Navya R Jul 29 '13 at 09:58
  • You can also do a Employee.save(r) and ignore the tempStore. Then you need to add the appropriate proxy config to your Employee model, which is usually quite similar to the proxy config of the store. – Christoph Jul 29 '13 at 11:59
  • The problem with saving the record before hand is that , we have many validations at server side for the record, which dont allow the empty record to be saved. – Navya R Aug 01 '13 at 05:33
2

One thing to note is that although the workaround of creating an unbuffered store works great when you can do it via code, there are some elements of grid editing where you don't get this opportunity - for example, using the cell or row editing plugins on a grid with a buffered store no longer works in 4.2.

In the end we've ended up going back to 4.1 to regain buffered store features, and will monitor what happens in future ExtJS updates before upgrading again. I would suggest anyone using buffered stores on large remote databases (where you can't accept reading the entire DB in during page load) consider carefully the 4.2 upgrade.

George Geczy
  • 76
  • 3
  • It is really bad that they break existing functionality in new releases. Which means if we want to upgrade we need to rewrite quite a lot of code. I also agree that anyone using buffered store should stay away from 4.2 release. – Navya R Jul 30 '13 at 05:16