ExtJS 4: Speichern Datensatz im Datensatz-Bearbeiten-Formular zum server und update-grid store

Unten habe ich ein raster von Projekt-Datensätzen. Ich bin das laden der Projekt-Datensatz-Liste, über eine asmx-web-service. Ich fahre ein List-Objekt .NETZ über einen json-proxy, um meine Projekt-Liste speichern. Jedes Projekt-Objekt bindet, um mein Projekt Modell. Doppelklicken Sie auf eine Zeile in der Liste Projekt-grid startet das Projekt Edit-Formular.

Ich habe Mühe mit dem speichern eines Bearbeiten, um einen Datensatz in meinem popup-Formular (widget.projectedit) nach einem Klick auf die Schaltfläche "Speichern". Ich bin mir nicht sicher, ob ich den senden mein update zum Projekt zu speichern und synchronisieren Sie meinen Shop mit meinem proxy, oder die Einrichtung eines separaten Speicher-und proxy für ein einzelnes Projekt aufnehmen, und dann einfach aktualisieren mein Projekt speichern und anzeigen.

"editProject" genannt wird, zu starten meiner form. Ich will "updateProject" aktualisieren mein Rekord, aber ich habe nicht eine Stellvertretung für die, die es noch werden (ich bin nicht aufrufen/aufrufen es im code unten).

Spezifische Fragen:

Wie rufe ich die "updateProject" - Funktion?

Wie aktualisiere ich meine Projekt-Liste raster-Shop?

, Was änderungen im code benötige ich? (Kann ich herausfinden, welcher code zu setzen, die die asmx-service.., ich brauche nur Hilfe mit dem JavaScript-code)

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>

Web-Service:

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;
        }
    }
}

InformationsquelleAutor MacGyver | 2012-07-20