Ext.grid.Panel edits are ignored

Question

I have a simple grid panel which needs to support editing. Visually, it seems to work ok but once I try to get all the users in the data store it is as if all edits are ignored.

Here's the code:

var myData = 
[        
];

var store = Ext.create('Ext.data.ArrayStore', 
                        {
                            model: 'User',
                            data: myData
                        });

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 1
});

// create the grid and specify what field you want
// to use for the editor at each header.
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: 
    [
        {
            id: 'email',
            header: 'User email',
            dataIndex: 'email',
            flex: 1,
            field: 
            {
                allowBlank: false
            }
        },           
        {
            xtype: 'checkcolumn',
            header: 'IsManager',
            dataIndex: 'isManager',
            width: 55
        },
        {
            xtype: 'checkcolumn',
            header: 'IsContractor',
            dataIndex: 'isContractor',
            width: 55
        }
    ],
    selModel: {
        selType: 'cellmodel'
    },        
    frame: false,
     listeners : 
     {
        delay: 1, // time for render
        validateedit: function(editor, e)
        {
            //console.log(e.value);
            //console.log(e.originalValue);
            e.cancel = true;
            e.record.data[e.field] = e.value;
        }
     },
    tbar: 
    [
        {
            text: 'Add User',
            handler : function()
            {
                // Create a record instance through the ModelManager
                var r = Ext.ModelManager.create(
                {
                    email: '',
                    isManager: true,
                    isContractor: false
                }, 
                'User');

                store.insert(store.data.length, r);
                cellEditing.startEditByPosition({row: store.data.length, column: 0});
            }
        },
        {
            text: 'Remove selected user',
            handler : function()
            {
                var selection = grid.getView().getSelectionModel().getSelection();

                if(selection)
                    store.remove(selection); // all selections
            }
        }
    ],
    plugins: [cellEditing]
});

I'm using Extjs 4.2

Even calling store.commitChanges() makes no difference. If I don't call it and go through the store I can see records have the dirty flag on but the modified value is the same as the initial value! The weird part is that I can see the value being there if I put a breakpoint in the validateedit function. However, once all editing and adding is done, when I go through store.data.items all rows look the same (= what Ext.ModelManager.create outputs in Add user). I have tried setting autoSave, autoSync and autoLoad to true in the store but it doesn't make any difference.

EDIT:

Here is the user model:

Ext.define('User', 
    {
        extend: 'Ext.data.Model',
        fields: [            
            {name: 'email', type: 'string'},            
            {name: 'isManager', type: 'bool'},
            {name: 'isContractor', type: 'bool'},            
        ]
    });

Answer 1

I don't think e.record.data[e.field] = e.value; is changing the values in your store, acording to the doc it's just a util object. If you actually want to modify your store, you should use something like this :

 validateedit: function(editor, e)
 {
        store.getbyId("Your object Id property").set(e.field, e.value);
 }

But your model need an 'Id' or 'IdProperty'