以下に、プロジェクト レコードのグリッドがあります。asmx Web サービスを介してプロジェクト レコード リストを読み込んでいます。json プロキシ経由で .NET の List オブジェクトをプロジェクト リスト ストアに返しています。各 Project オブジェクトは、私の Project モデルにバインドします。プロジェクト リスト グリッドの行をダブルクリックすると、プロジェクト編集フォームが起動します。
[保存] ボタンをクリックした後、ポップアップ フォーム (widget.projectedit) のレコードへの編集を保存するのに苦労しています。更新をプロジェクト ストアに送信してストアをプロキシと同期するか、1 つのプロジェクト レコードに対して別のストアとプロキシを設定してから、プロジェクト ストアとビューを更新するだけでよいかわかりません。
フォームを起動するために「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;
}
}
}