ExtJS 4：以记录编辑形式将记录保存到服务器并更新网格存储

Question

下面，我有一个项目记录网格。我正在通过 asmx Web 服务加载项目记录列表。我通过 json 代理将 .NET 中的 List 对象返回到我的项目列表存储。每个 Project 对象都绑定到我的 Project 模型。双击项目列表网格中的一行会启动项目编辑表单。

单击“保存”按钮后，我正在努力在弹出表单 (widget.projectedit) 中保存对记录的编辑。我不确定是否应该将更新发送到项目存储并将我的存储与代理同步，或者为单个项目记录设置单独的存储和代理，然后刷新我的项目存储和视图。

正在调用“editProject”来启动我的表单。我希望“updateProject”更新我的记录，但我还没有委托（我没有在下面的代码中调用/调用它）。

具体问题：

如何调用“updateProject”函数？

如何更新我的项目列表网格存储？

我需要更改哪些代码？ （我可以弄清楚要在 asmx 服务中放入什么代码。我只需要有关 JavaScript 代码的帮助）

ProjectList.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ProjectList.ascx.cs" Inherits="Web.Controls.ProjectList.ProjectList" %>

<div id="example-grid"></div>

<asp:ScriptManager ID="PageScriptManager" runat="server">
    <Services>
        <asp:ServiceReference Path="~/WebService1.asmx" InlineScript="false" />
    </Services>
    <Scripts>
        <asp:ScriptReference Path="~/ext-4/ext-all-debug.js" />
        <asp:ScriptReference Path="~/Controls/ProjectList/ProjectList.js" />
        <asp:ScriptReference Path="~/Controls/ProjectList/Proxy.js" />
    </Scripts>
</asp:ScriptManager>

<script type="text/javascript">

    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();

</script>

网络服务：

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
{
    /// <summary>
    /// Summary description for WebService1
    /// </summary>
    [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<Project> GetProjects(string myTest, string bar)
        {
            var list = new List<Project>(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;
        }
    }
}

Answer 1

你需要决定：

ONE：在编辑器窗口中独立加载和保存模型。

示例代码：http://jsfiddle.net/el_chief/rUaV3/4/

（上面的 ajax 保存是假的，所以你不会在网格上看到更新）。

二：从调用者传入模型，并将模型保存在调用者中。

示例代码：http://jsfiddle.net/el_chief/5jjBS/4/

ONE 有点慢，但一切都是独立的，你也可以独立测试它们。-

此外，如果您从调用者传入模型并且用户进行更改然后关闭子窗口，则这些更改可能会出现在调用者中（取决于您如何进行视图/模型同步）。

此外，您通常只想抓取几个字段以在网格上显示，但在项目视图表单上显示所有字段。在这种情况下，您需要选项 ONE。

无论哪种方式，您都应该将一个回调函数传递给子窗口，它会在“完成”时调用它。这样您就可以从子窗口取回所需的任何数据，并在需要时将其关闭。

您也不需要单独的橱窗商店。你应该把你的代理放在你的模型上（商店使用它的模型代理，你可以随时覆盖它）

保存的一个关键方面是您需要返回一些数据，通常是完整的记录，例如：

{
success:true,
contacts:[
{
id:1,
name:'neil mcguigan updated record'
}
]
}