ExtJS4 grid won't update remote database

Question

For some reason, this configuration of an ExtJS4 grid won't update. When you click on a cell, change a value, it hits the create URL, not the update URL, as defined in the proxy and observed with Firebug in FF4. Strangely, the datachanged event fires after loading the store when the page starts, but not after data has actually changed. Also, the grid send all rows to the create URL.

Can anyone tell me what I am doing wrong?

Ext.onReady(function() {

    Ext.BLANK_IMAGE_URL = '/images/extjs4/s.gif';
    Ext.tip.QuickTipManager.init();
    //Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

    Ext.define('VendorError', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'UnexpSrvID', type: 'int'},
            {name: 'VendorID', type: 'int'},
            {name: 'VendorName', type: 'string'},
            {name: 'VndActID', type: 'int'},
            {name: 'VndActNb', type: 'string'},
            {name: 'InvoiceID', type: 'int'},
            {name: 'VInvNb', type: 'string'},
            {name: 'VInvRcptDt', type: 'date', dateFormat: 'Y-m-d' },
            {name: 'InvDate', type: 'date', dateFormat: 'Y-m-d' },
            {name: 'CodeSpecifier', type: 'string'},
            {name: 'Recurrence', type: 'string'},
            {name: 'ClientID', type: 'int'},
            {name: 'ClientName', type: 'string'},
            {name: 'LocID', type: 'int'},
            {name: 'LocName', type: 'string'},
            {name: 'RecentLocStatus', type: 'string'},
            {name: 'RecentLocStatusDate', type: 'date', dateFormat: 'Y-m-d' },
            {name: 'UnexpCost', type: 'float'},
            {name: 'ConfirmedAmt', type: 'float'},
            {name: 'StaffID', type: 'int'},
            {name: 'NetworkID', type: 'string'},
            {name: 'UnexpStatCode', type: 'string'}
        ],
        proxy: {
            type: 'ajax',
            simpleSortMode: true,
            api: {
                read: '/internal/viewVERext_json.asp',
                create: '/internal/viewVERext_create.asp',
                update: '/internal/viewVERext_update.asp',
                destroy: '/internal/viewVERext_destroy.asp'
            },
            reader: {
                type: 'json',
                totalProperty: 'total',
                successProperty: 'success',
                messageProperty: 'message',
                root: 'data'
            },
            writer: {
                type: 'json',
                writeAllFields: false,
                allowSingle: false,
                root: 'data'
            },
            listeners: {
                exception: function(proxy, response, operation){
                    Ext.MessageBox.show({
                        title: 'REMOTE EXCEPTION',
                        msg: operation.getError(),
                        icon: Ext.MessageBox.ERROR,
                        buttons: Ext.Msg.OK
                    });
                }
            }
        }
    });

    var store = Ext.create('Ext.data.Store', {
        model: 'VendorError',
        autoLoad: true,
        autoSync: true,
        pageSize: 20,
        remoteSort: true,
        listeners: {
        //  write: function(proxy, operation){
        //      if (operation.action == 'destroy') {
        //          main.child('#form').setActiveRecord(null);
        //      }
        //      Ext.example.msg(operation.action, operation.resultSet.message);
        //  }
            datachanged: function() {
                var report = "";
                store.each( 
                    function(rec) { 
                        report = report + rec.dirty + '/';
                    } 
                )
                alert(report);
            }
        }
    });

    // create the Grid
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        //stateful: true,
        //stateId: 'stateGrid',
        columns: [
            {   text     : 'Vendor',
                dataIndex: 'VendorName',
                flex     : 1
            },
            {   text     : 'Account',
                dataIndex: 'VndActNb'
            },
            {   text     : 'Invoice',
                dataIndex: 'VInvNb'
            },
            {   text     : 'Invoiced',
                dataIndex: 'InvDate', 
                xtype    : 'datecolumn',
                align    : 'center'
            },
            {   text     : 'Receipted',
                dataIndex: 'VInvRcptDt', 
                xtype    : 'datecolumn',
                align    : 'center'
            },
            {   text     : 'Description',
                dataIndex: 'CodeSpecifier'
            },
            {   text     : 'Client',
                dataIndex: 'ClientName'
            },
            {   text     : 'Location',
                dataIndex: 'LocName'
            },
            {   text     : 'LStatus',
                dataIndex: 'RecentLocStatus',
                align    : 'center'
            },
            {   text     : 'Credit',
                dataIndex: 'UnexpCost',
                tdCls    : 'colyellow',
                renderer : Ext.util.Format.usMoney,
                align    : 'right',
                field    : { xtype:'textfield', allowBlank:false }
            },
            {   text     : 'Confirmed',
                dataIndex: 'ConfirmedAmt',
                tdCls    : 'colyellow',
                renderer : Ext.util.Format.usMoney,
                align    : 'right',
                field    : { xtype:'textfield', allowBlank:false }
            },
            {   text     : 'Recurrence',
                dataIndex: 'Recurrence',
                tdCls    : 'colyellow',
                align    : 'center',
                field    : {
                    xtype    : 'combobox',
                    typeAhead: true,
                    triggerAction: 'all',
                    selectOnTab: true,
                    store: [
                        ['once','once'],['1st','1st'],['2nd+','2nd+']
                    ],
                    lazyRender: true
                }
            },
            {   text     : 'CStatus',
                dataIndex: 'UnexpStatCode',
                tdCls    : 'colyellow',
                align    : 'center',
                field    : {
                    xtype    : 'combobox',
                    typeAhead: true,
                    triggerAction: 'all',
                    selectOnTab: true,
                    store: [
                        <%=cstat_grid%>
                    ],
                    lazyRender: true
                }
            },
            {   text     : 'Owner',
                dataIndex: 'NetworkID',
                tdCls    : 'colyellow',
                field    : {
                    xtype    : 'combobox',
                    typeAhead: true,
                    triggerAction: 'all',
                    selectOnTab: true,
                    store: [
                        <%=staff_grid%>
                    ],
                    lazyRender: true
                }
            }
        ],
        layout: 'fit',
        height: 500,
        renderTo: 'theGrid',
        selType: 'cellmodel',
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })
        ],
        dockedItems: [
            {   xtype: 'pagingtoolbar',
                store: store,
                dock: 'bottom',
                displayInfo: true
            },
            {   xtype: 'toolbar',
                dock: 'top',
                items: [
                    { xtype:'button', 
                      text: 'IsDirty()', 
                      handler: function() { 
                        var report = "";
                        store.each( 
                            function(rec) { 
                                report = report + rec.dirty + '/';
                            } 
                        )
                        alert(report);
                        }
                    }
                ]
            }
        ],
        viewConfig: {
            stripeRows: true
        }
    });

    Ext.EventManager.onWindowResize(grid.doLayout, grid);
});

Answer 1

Turns out the issue is that records added into the grid are detected as "not new" by the value of a unique id field. A kind poster on the Sencha forums pointed me to this.

By default, this field in the model is expected to have a name of 'id'. So, you must either provide a model with a field of 'id', which my model above did not have, or you must override the default column by using the idProperty property of Ext.data.Model. I simply renamed the UnexpSrvId column to id. And, lo and behold, we send updates to update() instead of create().

This is not obvious from the API docs, as many things unfortunately are in this powerful framework.