0

我正在通过 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 请求图像(在新选项卡中打开以使其更大):

在此处输入图像描述

4

1 回答 1

2

您遇到的问题似乎与此日期字段的日期格式有关。
默认情况下,ExtJS 期望以不同于 .Net 使用的格式发送日期。

通过以下方式更新模型应该会有所帮助:

{ name: 'date_start', type: 'date', dateFormat: 'MS' }

或者

{ name: 'date_start', type: 'date', dateFormat: 'U' }

请参阅 ExtJS API 了解dateFormat及其可能的

于 2012-07-26T20:55:15.417 回答