Datetime 使用loadRecord和updateRecord日期字段设置为null的Extjs 4 Ext.form.Panel

我有一个网格和一个打开表单的操作按钮。网格和表单中有一个日期字段是不可编辑的-但是当我更新记录时，网格中的数据字段值设置为null

我注意到两件事-在ext all中-当解析日期时-它不被识别为日期，而是字符串，因此当解析时，它应该是ms格式-但实际上是“yyy-mm-dd”格式。因此解析返回null——这就是发送到网格的内容

有没有想过如何避开这个问题并返回实际日期

谢谢

这是我的index.cshtml

     <script type="text/javascript">
          Ext.require([
          'Ext.container.Viewport',
          'Ext.grid.*',
          'Ext.util.*',
          'Ext.Date.*',
          'Ext.ux.CheckColumn',

          'ACTGRID.ui.FormPanelGrid'
         ]);

      Ext.onReady(function () {
          initialize();
      });


      function initialize() {
          Ext.Ajax.timeout = 60000; // 60 seconds

          var myGrid = Ext.create('ACTGRID.ui.FormPanelGrid');

           var viewport = Ext.create('Ext.container.Viewport', {
              layout: 'border',
              items: [{
                      region: 'center',
                      title: 'Grid',
                      items: myGrid }]
          });
      };
   </script>

这是编辑表单：

    Ext.define('ACTGRID.ui.EditFormPanel', {
    extend: 'Ext.form.Panel',
    requires: ['Ext.form.field.Text'],
    layout: {
        type: 'hbox',
        align: 'stretch'  // Child items are stretched to full width
    },
    initComponent: function () {
        var me = this;
        me.activeRecord = null;
        me.title = 'Please Review and Add Comments';
        me.plain = true;
        me.defaults = {
        flex: 1,
        border: false,
        frame: false
    };

    me.fieldDefaults = {
        labelAlign: 'left',
        labelWidth: 150
    };
    me.items = [{// column #1
        xtype: 'panel',
        items: [
                { fieldLabel: 'Approval', name: 'Approval', submitValue: false, xtype: 'displayfield' },
                { fieldLabel: 'RecordDate', name: 'RecordDate', submitValue: false, xtype: 'displayfield', valueToRaw: Ext.util.Format.dateRenderer('m/d/Y') }
                ]
    }, 
    { // column #2
        xtype: 'panel',
        items: [
            { fieldLabel: 'Error Comment', name: 'ErrorComment', xtype: 'textareafield', minHeight: 280, minWidth: 400, allowBlank: false, anchor: '100%', submitValue: true },
            { fieldLabel: 'Error Source', name: 'ErrorSource', xtype: 'textareafield', minHeight: 280, minWidth: 400, allowBlank: false, anchor: '100%', submitValue: true }]
    }];

    me.onSave = function (button, event) {
        var active = this.activeRecord,
        form = this.getForm();
        if (!active) {
            return;
        }
        if (form.isValid()) {
            form.updateRecord(active);
        }
    };

    me.onClose = function (button, event) {
        this.setActiveRecord(null);
        ACTGRID.ui.traderEditFormInstance.hide();
    };

    me.dockedItems = me.buildDockedItems();
    me.callParent(arguments);
},

// inline buttons
buildDockedItems: function () {
    var me = this;
    return [{
        xtype: 'toolbar',
        dock: 'bottom',
        items: ['->', {
            itemId: 'save',
            text: 'Save',
            tooltip: 'Save Comments',
            handler: function () {
                me.onSave();
            }

        }, '-', {
            itemId: 'close',
            text: 'Close',
            tooltip: 'Close',
            handler: function () {
                me.onClose();
            }
        }]
    }];
},

setActiveRecord: function (record) {
    this.activeRecord = record;
    if (record) {
        this.down('#save').enable();
        this.getForm().loadRecord(record);
    } else {
        this.down('#save').disable();
        this.getForm().reset();
    }
}
});

Ext.define('ACTGRID.ui.EditForm', {
extend: 'Ext.window.Window',
title: 'Add Comments',
layout: 'fit',
initComponent: function () {
    var me = this;
    me.closeAction = 'hide';
    me.plain = true;
    me.minWidth = 700;
    me.minHeight = 300;
    me.autoHeight = true;
    me.resizable = true;
    me.modal = true;
    me.autoHeight = true;
    me.width = 800;
    me.title = 'Comments';
    me.form = Ext.create('ACTGRID.ui.EditFormPanel');
    me.items = [me.form];

    me.callParent(arguments);
}

});

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.Message = "Welcome to ASP.NET MVC!";

        return View();
    }


    [AcceptVerbs(HttpVerbs.Get)]
    [ActionName("ActionsGrid")]
    public ActionResult GetActionsGrid()
    {
        DetailsViewModel model = new DetailsViewModel();
        List<ExtJsTreeGrid.Models.ActionGrid> ActionsFromDB = model.GetActionsGrid();

        model.transaction = ActionsFromDB;
        model.success = true;
        return Json(model, JsonRequestBehavior.AllowGet);
    }
}

公共类HomeController:控制器
{
公共行动结果索引（）
{
ViewBag.Message=“欢迎使用ASP.NET MVC！”；
返回视图（）；
}
[接受动词（HttpVerbs.Get）]
[ActionName（“ActionsGrid”）]
公共操作结果GetActionsGrid（）
{
DetailsViewModel model=新的DetailsViewModel（）；
列出ActionsFromDB=model.GetActionsGrid（）；
model.transaction=ActionsFromDB；
model.success=true；
返回Json（model，JsonRequestBehavior.AllowGet）；
}
}

型号：

public class ActionGrid
{
    public Int32 Id { get; set; }
    public bool Approval { get; set; }
    public string ErrorComment { get; set; }
    public string ErrorSource { get; set; }
    public DateTime RecordDate { get; set; }
}

public class DetailsViewModel
{
    public List<ActionGrid> transaction = new List<ActionGrid>();
    public bool success = true;

    public List<ActionGrid> GetActionsGrid()
    {
        return new List<ActionGrid> {
             new ActionGrid { Id = 1, 
                        Approval = true, 
                        ErrorComment = string.Empty, 
                        ErrorSource = string.Empty,
                        RecordDate = new DateTime(1979, 11, 23)
             },
             new ActionGrid { Id = 2, 
                        Approval = true, 
                        ErrorComment = string.Empty, 
                        ErrorSource = string.Empty,
                        RecordDate = new DateTime(1980, 05, 20)
             },
             new ActionGrid { Id = 3, 
                        Approval = true, 
                        ErrorComment = string.Empty, 
                        ErrorSource = string.Empty,
                        RecordDate = new DateTime(1995, 01, 12)
             },
             new ActionGrid { Id = 4, 
                        Approval = true, 
                        ErrorComment = string.Empty, 
                        ErrorSource = string.Empty,
                        RecordDate = new DateTime(2010, 09, 02)
             }};

    }
}



EDIT:  I added a check for value being already a date, to ext-all to date conversion function.  Is there a better way?

    DATE: {
        convert: function (v) {
                var df = this.dateFormat,
                    parsed;

                if (!v) {
                    return null;
                }

                if (Ext.isDate(v)) {
                    return v;
                }

                **try {
                    var myDate = new Date(v);
                    if (Ext.isDate(myDate) == true && isNaN(myDate) == false && myDate != undefined)
                        return myDate;
                }
                catch (ex) {
                }**
                if (df) {
                    if (df == 'timestamp') {
                        return new Date(v * 1000);
                    }
                    if (df == 'time') {
                        return new Date(parseInt(v, 10));
                    }
                    return Ext.Date.parse(v, df);
                }

                parsed = Date.parse(v);
                return parsed ? new Date(parsed) : null;
            },
            sortType: st.asDate,
            type: 'date'
    }

公共类ActionGrid
{
公共Int32 Id{get；set；}
公共布尔批准{get；set；}
公共字符串ErrorComment{get；set；}
公共字符串ErrorSource{get；set；}
公共日期时间记录日期{get；set；}
}
公共类详细信息viewmodel
{
公共列表事务=新列表（）；
公共事业成功=真；
公共列表GetActionsGrid（）
{
返回新列表{
新ActionGrid{Id=1，
批准=正确，
ErrorComment=string.Empty，
ErrorSource=string.Empty，
RecordDate=新的日期时间（1979,11,23）
},
新ActionGrid{Id=2，
批准=正确，
ErrorComment=string.Empty，
ErrorSource=string.Empty，
RecordDate=新的日期时间（1980、05、20）
},
新ActionGrid{Id=3，
批准=正确，
ErrorComment=string.Empty，
ErrorSource=string.Empty，
RecordDate=新的日期时间（1995,01,12）
},
新ActionGrid{Id=4，
批准=正确，
ErrorComment=string.Empty，
ErrorSource=string.Empty，
RecordDate=新的日期时间（2010年9月2日）
}};
}
}
编辑：我在ext all to date转换函数中添加了一个检查值是否已经是日期的选项。有更好的办法吗？
日期：{
转换：函数（v）{
var df=this.dateFormat，
解析；
如果（！v）{
返回null；
}
if（分机isDate（v））{
返回v；
}
**试一试{
var myDate=新日期（v）；
if（Ext.isDate（myDate）==true&&isNaN（myDate）==false&&myDate！=未定义）
返回myDate；
}
捕获（ex）{
}**
中频（df）{
如果（df==“时间戳”）{
返回新日期（v*1000）；
}
如果（df=‘时间’）{
返回新日期（parseInt（v，10））；
}
返回Ext.Date.parse（v，df）；
}
parsed=Date.parse（v）；
返回解析？新日期（解析）：空；
},
sortType:st.asDate，
键入：“日期”
}

在列规范中使用格式如何？如下所示：

{text:'RecordDate'，dataIndex:'RecordDate'，renderer:Ext.util.Format.dateRenderer（Ext.Date.patterns.ShortDate），Format:'MS'}

我将模型中的格式指定为MS。我跟踪到Ext all。更新网格字段时，它将确定每个字段的类型。就我而言，这是正确的日期。然后，如果指定了格式，它会尝试使用格式进行转换。日期：{convert:function（v）{…}表单中的日期为“2010/09/02”，而不是ms。该值作为Ext.isDate进行测试。问题是，虽然它是DATE，但它是一个字符串，因此isDate（v）返回false。然后它尝试应用“ms”格式，从ms转换返回null。尽管它是“日期”，但它是一个字符串。有没有办法在表单中将其保留为日期？我在ext all to date转换函数中添加了一个检查值是否已经是日期的选项。有更好的办法吗？我在原始问题中添加了代码。您可以在表单datefield配置中使用submitFormat对其进行更改，请检查：我认为

submitFormat:'MS'

应该可以做到这一点。我没有使用submit，而是使用updateRecord。submitFormat不会影响结果，因为updateRecord似乎使用Edit，而不是Submit。

public class ActionGrid
{
    public Int32 Id { get; set; }
    public bool Approval { get; set; }
    public string ErrorComment { get; set; }
    public string ErrorSource { get; set; }
    public DateTime RecordDate { get; set; }
}

public class DetailsViewModel
{
    public List<ActionGrid> transaction = new List<ActionGrid>();
    public bool success = true;

    public List<ActionGrid> GetActionsGrid()
    {
        return new List<ActionGrid> {
             new ActionGrid { Id = 1, 
                        Approval = true, 
                        ErrorComment = string.Empty, 
                        ErrorSource = string.Empty,
                        RecordDate = new DateTime(1979, 11, 23)
             },
             new ActionGrid { Id = 2, 
                        Approval = true, 
                        ErrorComment = string.Empty, 
                        ErrorSource = string.Empty,
                        RecordDate = new DateTime(1980, 05, 20)
             },
             new ActionGrid { Id = 3, 
                        Approval = true, 
                        ErrorComment = string.Empty, 
                        ErrorSource = string.Empty,
                        RecordDate = new DateTime(1995, 01, 12)
             },
             new ActionGrid { Id = 4, 
                        Approval = true, 
                        ErrorComment = string.Empty, 
                        ErrorSource = string.Empty,
                        RecordDate = new DateTime(2010, 09, 02)
             }};

    }
}



EDIT:  I added a check for value being already a date, to ext-all to date conversion function.  Is there a better way?

    DATE: {
        convert: function (v) {
                var df = this.dateFormat,
                    parsed;

                if (!v) {
                    return null;
                }

                if (Ext.isDate(v)) {
                    return v;
                }

                **try {
                    var myDate = new Date(v);
                    if (Ext.isDate(myDate) == true && isNaN(myDate) == false && myDate != undefined)
                        return myDate;
                }
                catch (ex) {
                }**
                if (df) {
                    if (df == 'timestamp') {
                        return new Date(v * 1000);
                    }
                    if (df == 'time') {
                        return new Date(parseInt(v, 10));
                    }
                    return Ext.Date.parse(v, df);
                }

                parsed = Date.parse(v);
                return parsed ? new Date(parsed) : null;
            },
            sortType: st.asDate,
            type: 'date'
    }