title: ExtJS 4: Saving record in record edit form to server and update grid store
body: <p>Below, I have a grid of project records.  I'm loading the project record list via an asmx web service.  I'm returning a List object in .NET via a json proxy to my project list store.  Each Project object binds to my Project model.  Double clicking a row in the project list grid launches the Project Edit form.</p>
  
  <p>I'm struggling with saving an edit to a record in my popup form (widget.projectedit) after clicking the "Save" button.  I'm not sure whether I should be sending my update to the project store and syncing my store with my proxy, or setting up a separate store and proxy for a single Project record, and then just refresh my project store and view.</p>
  
  <p>"editProject" is being called to launch my form.  I want "updateProject" to update my record, but I don't have a delegate for it yet (I'm not invoking/calling it in the code below). </p>
  
  <p><strong>Specific questions:</strong></p>
  
  <p><em>How do I call the "updateProject" function?</em></p>
  
  <p><em>How do I update my project list grid store?</em></p>
  
  <p><em>What code changes do I need?  (I can figure out what code to put in the asmx service.. I just need help with the JavaScript code)</em></p>
  
  <p><img src="https://i.stack.imgur.com/NSWGo.jpg" alt="enter image description here"></p>
  
  <p><strong>ProjectList.ascx</strong></p>
  
  <pre><code>&lt;%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ProjectList.ascx.cs" Inherits="Web.Controls.ProjectList.ProjectList" %&gt;
  
  &lt;div id="example-grid"&gt;&lt;/div&gt;
  
  &lt;asp:ScriptManager ID="PageScriptManager" runat="server"&gt;
      &lt;Services&gt;
          &lt;asp:ServiceReference Path="~/WebService1.asmx" InlineScript="false" /&gt;
      &lt;/Services&gt;
      &lt;Scripts&gt;
          &lt;asp:ScriptReference Path="~/ext-4/ext-all-debug.js" /&gt;
          &lt;asp:ScriptReference Path="~/Controls/ProjectList/ProjectList.js" /&gt;
          &lt;asp:ScriptReference Path="~/Controls/ProjectList/Proxy.js" /&gt;
      &lt;/Scripts&gt;
  &lt;/asp:ScriptManager&gt;
  
  &lt;script type="text/javascript"&gt;
  
      Ext.require([
      'Ext.grid.*',
      'Ext.data.*',
      'Ext.panel.*',
      'Ext.layout.container.Border'
  ]);
  
      Ext.namespace('EXT');
  
      Ext.define('Project', {
          extend: 'Ext.data.Model',
          fields: [
          'project_id',
          'project_name',
          'project_number'
      ]
      });
  
      Ext.define('ProjectEdit', {
          extend: 'Ext.window.Window',
          alias: 'widget.projectedit',
  
          title: 'Edit Project',
          layout: 'fit',
          autoShow: true,
  
          initComponent: function () {
              this.items = [
                  {
                      xtype: 'form',
                      items: [
                          {
                              xtype: 'textfield',
                              name: 'project_id',
                              fieldLabel: 'Project ID'
                          },
                          {
                              xtype: 'textfield',
                              name: 'project_number',
                              fieldLabel: 'Project Number'
                          },
                          {
                              xtype: 'textfield',
                              name: 'project_name',
                              fieldLabel: 'Project Name'
                          }
                      ]
                  }
              ];
  
              this.buttons = [
                  {
                      text: 'Save',
                      action: 'save'
                  },
                  {
                      text: 'Cancel',
                      scope: this,
                      handler: this.close
                  }
              ];
  
              this.callParent(arguments);
          }
      });
  
      var store = new Ext.data.Store(
  {
      proxy: new Ext.ux.AspWebAjaxProxy({
          url: 'http://localhost/WebService1.asmx/GetProjects',
          actionMethods: {
              create: 'POST',
              destroy: 'DELETE',
              read: 'POST',
              update: 'POST'
          },
          extraParams: {
              myTest: 'a',
              bar: 'foo'
          },
          reader: {
              type: 'json',
              model: 'Project',
              root: 'd'
          },
          headers: {
              'Content-Type': 'application/json; charset=utf-8'
          }
      })
  });
  
      Ext.define('ProjectGrid', {
          extend: 'Ext.grid.Panel',
  
          initComponent: function () {
              var me = this;
  
              Ext.applyIf(me, {
                  store: store,
                  columns: [
                      { text: 'Project ID', width: 180, dataIndex: 'project_id', sortable: true },
                      { text: 'Project Number', width: 180, dataIndex: 'project_number', sortable: true },
                      { text: 'Project Name', width: 180, dataIndex: 'project_name', sortable: true }
                  ],
                  listeners: {
                      itemdblclick: this.editProject
                  }
              });
  
              me.callParent(arguments);
          },
  
          editProject: function (grid, record) {
              var view = Ext.widget('projectedit');
              view.down('form').loadRecord(record);
          },
  
          updateProject: function (button) {
              var win = button.up('window'),
              form = win.down('form'),
              record = form.getRecord(),
              values = form.getValues();
  
              record.set(values);
              win.close();
              // synchronize the store after editing the record
              this.getProjectStore().sync();
          }
      });
  
      // create the grid
      var grid = Ext.create('ProjectGrid', {
          title: 'Project List',
          renderTo: 'example-grid',
          width: 540,
          height: 200
      });
  
      store.load();
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Web Service:</strong></p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.Services;
  using System.Xml;
  using System.Data;
  using System.Web.Script.Services;
  using System.IO;
  using System.Text;
  
  namespace Web
  {
      /// &lt;summary&gt;
      /// Summary description for WebService1
      /// &lt;/summary&gt;
      [WebService(Namespace = "http://tempuri.org/")]
      [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
      [System.ComponentModel.ToolboxItem(false)]
      // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
      [System.Web.Script.Services.ScriptService]
      public class WebService1 : System.Web.Services.WebService
      {
          public class Project
          {
              public string project_id;
              public string project_number;
              public string project_name;
          }
  
          [WebMethod]
          [ScriptMethod(ResponseFormat = ResponseFormat.Json,
              UseHttpGet = false, XmlSerializeString = false)]
          public List&lt;Project&gt; GetProjects(string myTest, string bar)
          {
              var list = new List&lt;Project&gt;(new[] {
                  new Project() {project_id="1", project_name="project 1", project_number="001"},
                  new Project() {project_id="2", project_name= "project 2", project_number= "002" },
                  new Project() {project_id="3", project_name= "project 3", project_number= "003" }
              });
  
              return list;
          }
      }
  }
  </code></pre>