Question

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

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

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

具体问题：

如何调用“updateProject”函数？

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

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

enter image description here

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保存是假的，所以你不会在网格上看到更新）。

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

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

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

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

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

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

您也不需要为窗口提供单一商店。您应该将代理放在模型上（商店使用其模型代理，您始终可以覆盖它）

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

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

ExtJS 4：将记录编辑表单中的记录保存到服务器并更新网格存储

1 个答案: