ExtJS4 网格不会更新远程数据库

Question

由于某种原因，ExtJS4 网格的这种配置不会更新。当您单击一个单元格，更改一个值时，它会点击创建 URL，而不是更新 URL，正如在代理中定义并在 FF4 中使用 Firebug 观察到的那样。奇怪的是，datachanged 事件在页面启动时加载存储后触发，但在数据实际更改后不会触发。此外，网格将所有行发送到创建 URL。

谁能告诉我我做错了什么？

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

原来的问题是添加到网格中的记录被唯一 id 字段的值检测为“不是新的”。 Sencha 论坛上的 poster 向我指出了这一点。

默认情况下，模型中的此字段的名称应为“id”。因此，您必须提供一个具有“id”字段的模型，而我上面的模型没有，或者您必须使用Ext.data.Model 的 idProperty 属性覆盖默认列。我只是将UnexpSrvId 列重命名为id。而且，你瞧，我们将更新发送到 update() 而不是 create()。

这在 API 文档中并不明显，因为不幸的是，很多东西都在这个强大的框架中。

Answer 2

因为您的网格使用CellEdit 混合，您可以向grid 添加一个侦听器，它将在编辑后将更改提交到您的记录。因此，在您的网格中，添加如下定义的 listeners 配置选项...

listeners: {
    edit : function(e) {
        e.record.commit();
    }
}

编辑：我认为您在代理上使用了错误的语法...您只能定义读取器和写入器（从外观上看）...

Ed Spencer's article on Proxies

ExtJS 4 API Entry on Proxies