Ext JS JSON プロキシ経由で JSON Web サービスから .NET シリアライズ オブジェクト (プロジェクト オブジェクト) のリストを返しています。 Ext.grid.Panel に日付形式のフィールドを正しく表示させることができません。なぜでしょうか？ 以下で「これ」を検索してください。他のすべてのフィールドは Ext グリッドに正しく表示されています。また、カレンダー コントロールから日付を保存すると、日付がデータベースに適切に保存されます。他の問題を除外するために、オブジェクトに日付をハード コードしました。
シリアル化されたクラス:
[Serializable]
public class Project
{
public string project_id;
public string project_number;
public string project_name;
public string description;
public DateTime? date_start;
}
ウェブ方式:
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = false, XmlSerializeString = false)]
public List<Project> GetProjects(string myTest, string bar)
{
Database db = DatabaseFactory.CreateDatabase("HIMC-DEV");
DbCommand cmd = db.GetStoredProcCommand("project_get_list");
db.AddInParameter(cmd, "@user_id", DbType.String, "");
DataSet ds = db.ExecuteDataSet(cmd);
DataTable dt = ds.Tables[0];
List<Project> projectList = new List<Project>();
foreach (DataRow row in dt.Rows)
{
Project p = new Project();
p.project_id = row[0].ToString();
p.project_number = row[1].ToString();
p.project_name = row[2].ToString();
p.description = row[3].ToString();
p.date_start = new DateTime(2012, 1, 12); // <=== this one
projectList.Add(p);
}
return projectList;
}
外部モデル:
Ext.define('Project', {
extend: 'Ext.data.Model',
fields: [
{ name: 'project_id' },
{ name: 'project_name' },
{ name: 'project_number' },
{ name: 'description' },
{ name: 'date_start', type: 'date' }
]
});
JSON プロキシ:
Ext.define('Ext.ux.AspWebAjaxProxy', {
extend: 'Ext.data.proxy.Ajax',
require: 'Ext.data',
buildRequest: function (operation) {
var params = Ext.applyIf(operation.params || {}, this.extraParams || {}),
request;
params = Ext.applyIf(params, this.getParams(params, operation));
if (operation.id && !params.id) {
params.id = operation.id;
}
params = Ext.JSON.encode(params);
request = Ext.create('Ext.data.Request', {
params: params,
action: operation.action,
records: operation.records,
operation: operation,
url: operation.url
});
request.url = this.buildUrl(request);
operation.request = request;
return request;
}
});
フォームが埋め込まれた Ext Window:
Ext.define('ProjectEdit', {
extend: 'Ext.window.Window',
alias: 'widget.projectedit',
title: 'Edit Project',
layout: 'fit',
autoShow: true,
closable : true,
initComponent: function () {
this.items = [
{
xtype: 'form',
width: 650,
height: 300,
bodyPadding: 20,
items: [
{
xtype: 'textfield',
name: 'project_id',
fieldLabel: 'Project ID'
//disabled: true
},
{
xtype: 'textfield',
name: 'project_number',
fieldLabel: 'Project Number'
},
{
xtype: 'textfield',
name: 'project_name',
fieldLabel: 'Project Name'
},
{
xtype: 'datefield',
format: 'm/d/Y',
allowBlank: true,
name: 'date_start',
fieldLabel: 'Start Date'
},
{
xtype: 'combo',
fieldLabel: 'Manager',
emptyText: 'select keyword',
store: keywordStore,
valueField: 'name',
displayField: 'name',
mode: 'remote',
autoSelect: false,
selectOnFocus: true,
shadow: true,
forceSelection: true,
triggerAction: 'all', // not sure what this is?
hideTrigger: true,
//multiSelect:true,
typeAhead: true,
minChars: 1,
renderTo: document.body
},
{
xtype: 'htmleditor',
name: 'description',
fieldLabel: 'Description',
enableColors: false,
enableAlignments: false,
width: '100%'
}
]
}
];
...
外部グリッド:
Ext.define('ProjectGrid', {
extend: 'Ext.grid.Panel',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
store: store,
columns: [
{ text: 'Project ID', dataIndex: 'project_id', sortable: true },
{ text: 'Project Number', dataIndex: 'project_number', sortable: true },
{ text: 'Project Name', dataIndex: 'project_name', sortable: true, width: 300 },
{ text: 'Start Date', dataIndex: 'date_start', sortable: true, width: 300, renderer: Ext.util.Format.dateRenderer('Y-m-d') },
{ text: 'Description', dataIndex: 'description', sortable: true, width: 500 }
],
listeners: {
//itemdblclick: this.editProject
itemdblclick: function(view, record, item, index, e) {
//var w = new ProjectEdit();
var w = Ext.widget('projectedit');
w.show(); // show the window
w.down('form').loadRecord(record); // load the record in the form
w.callback = Ext.bind(this.editProject, this); // bind lets you set the scope of the callback (for the project that was double clicked)
}
}
});
me.callParent(arguments);
},
...
});
Firebug NET タブからの JSON リクエスト画像 (拡大するには新しいタブで開きます):
