ExtJS 4: Enregistrement d'enregistrement d'enregistrement, modifiez le formulaire au serveur et à la mise à jour de la grille de magasin

Ci-dessous, j'ai une grille des dossiers du projet. Je suis le chargement du projet de la liste d'enregistrement via un service web asmx. Je suis de retour d'une Liste d'objet .NET via un json proxy pour mon projet de liste de magasin. Chaque objet du Projet se lie à mon Projet modèle. En Double cliquant sur une ligne dans la liste des projets de la grille lance le Projet de formulaire de modification.

Je suis aux prises avec l'économie d'une modification d'un enregistrement dans mon menu contextuel forme (widget.projectedit) après avoir cliqué sur le bouton "Enregistrer". Je ne suis pas sûr de savoir si je dois envoyer ma mise à jour pour le projet de stocker et de synchroniser mon magasin avec mon proxy, ou la mise en place d'un magasin séparé et d'un proxy pour un Projet unique d'enregistrement, et puis il suffit de rafraîchir mon projet d'enregistrer et d'afficher.

"editProject" est appelé pour le lancement de ma forme. Je veux "updateProject" pour mettre à jour mon disque, mais je n'ai pas de délégué pour encore (je ne suis pas en invoquant/l'appeler dans le code ci-dessous).

Questions spécifiques:

Comment dois-je appeler le "updateProject" fonction?

Comment puis-je mettre à jour ma liste de projet de grille de magasin?

Les modifications de code dont j'ai besoin? (Je peux comprendre à quel est le code à mettre dans le asmx service.. j'ai juste besoin d'aide avec le code 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>

Service Web:

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

OriginalL'auteur MacGyver | 2012-07-20