.net - ExtJS 4 : Saving record in record edit form to server and update grid store

Question

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

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

正在调用“editProject”来启动我的表单。我想要“updateProject”来更新我的记录，但我还没有它的委托(delegate)(我没有在下面的代码中调用/调用它)。

具体问题:

如何调用“updateProject”函数？

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

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

项目列表.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 有点慢，但一切都是独立的，你也可以独立测试它们。-

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

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

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

您也不需要单独为橱窗设计商店。你应该把你的代理放在你的模型上(商店使用它的模型代理，你总是可以覆盖它)

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

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