La cuadrícula ExtJS4 no actualizará la base de datos remota

Question

Por alguna razón, esta configuración de una grilla ExtJS4 no se actualizará. Cuando hace clic en una celda, cambia un valor, golpea la URL de creación, no la URL de actualización, como se define en el proxy y se observa con Firebug en FF4. Extrañamente, el evento de cambio de datos se dispara después de cargar la tienda cuando se inicia la página, pero no después de que los datos realmente hayan cambiado. Además, la cuadrícula envía todas las filas a la URL de creación.

¿Alguien puede decirme qué estoy haciendo mal?

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

resulta que el tema es que los registros añadidos a la red se detectan como "no es nuevo" por el valor de un campo ID único. Un tipo poster en los foros de Sencha me indicó esto.

De forma predeterminada, se espera que este campo en el modelo tenga un nombre de 'id'. Por lo tanto, debe proporcionar un modelo con un campo de 'id', que mi modelo anterior no tenía, o debe anular la columna predeterminada utilizando la propiedad idProperty de Ext.data.Model. Simplemente cambié el nombre de la columna UnexpSrvId al id. Y, he aquí, enviamos actualizaciones a update() en lugar de create().

Esto no es obvio en los documentos API, ya que muchas cosas desafortunadamente se encuentran en este potente marco.

Answer 2

Debido a que su rejilla está utilizando el mixin CellEdit puede agregar un oyente a la grid que confirmar los cambios en su registro después de la edición. Así que en su rejilla, añadir la opción de configuración oyentes define como sigue ...

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

EDIT: Creo que estás utilizando la sintaxis incorrecta en su proxy ... sólo se puede definir un lector y escritor (por el aspecto de las cosas) ...

Ed Spencer's article on Proxies

ExtJS 4 API Entry on Proxies