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

时间:2013-03-11 19:19:44

标签: datetime extjs extjs4 extjs4.1

我有一个网格和一个打开表单的操作按钮。网格和表单上有一个不可编辑的日期字段 - 但是当我执行updateRecord时,数据字段值在网格中设置为null。

我注意到两件事 - 在ext-all中 - 当解析日期时 - 它不被识别为日期,而是字符串,所以当它被解析时,它应该是以ms为单位 - 但实际上是'yyyy-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>

这是GridPanel:

 Ext.Date.patterns = {
    ISO8601Long: "Y-m-d H:i:s",
    ISO8601Short: "Y-m-d",
    ShortDate: "n/j/Y",
    LongDate: "l, F d, Y",
    FullDateTime: "l, F d, Y g:i:s A",
    MonthDay: "F d",
    ShortTime: "g:i A",
    LongTime: "g:i:s A",
    SortableDateTime: "Y-m-d\\TH:i:s",
    UniversalSortableDateTime: "Y-m-d H:i:sO",
    YearMonth: "F, Y"
};


Ext.define('ACTGRID.ui.TransactionsLateModel', {
extend: 'Ext.data.Model',
fields: [
    { name: 'Id', type: 'int' },
    { name: 'Approval', type: 'boolean' },
    { name: 'ErrorComment', type: 'string' },
    { name: 'ErrorSource', type: 'string'},
    { name: 'RecordDate', type: 'date', dateFormat: 'MS' }],


idProperty: 'Id'
});

ACTGRID.ui.editFormInstance = Ext.create('ACTGRID.ui.EditForm').hide();

Ext.define("ACTGRID.ui.FormPanelGrid", {
    extend: "Ext.grid.Panel",
    requires: ['ACTGRID.ui.TransactionsLateModel'],

    initComponent: function () { 
        var me = this;


        me.columns = me.buildColumns();
        me.store = Ext.create('Ext.data.Store', {
            model: 'ACTGRID.ui.TransactionsLateModel',
            remoteSort: true,
            storeId: 'TransactionsLateStoreId',
            autoLoad: true,
            buffered: true,
            autoSync: true,

            pageSize: 70,
            proxy: {
                type: 'rest',
                timeout: 600000,

                url: '/Home/ActionsGrid/',
                reader: {
                    type: 'json',
                    root: 'transaction',
                    totalProperty: "Total"
                },
                writer: {
                    type: 'json',
                    root: 'transaction'
                }
            }
        });


       me.autoSizeColumns = true;
       me.autoScroll = true;
       me.forcefit = true;
       me.callParent(arguments);

  },

   showEditForm: function (rec) {
    var me = this;
    ACTGRID.ui.editFormInstance.setPosition(100, 100);


    ACTGRID.ui.editFormInstance.form.setActiveRecord(rec || null);
    ACTGRID.ui.editFormInstance.show();

},

buildColumns: function () {
    var me = this;

    return [
    { text: 'Add Comments', xtype: 'actioncolumn',
        width: 80,
        items: [{
            icon: '/./Content/images/tab_new.gif',
            tooltip: 'Edit',
            handler: function (grid, rowIndex, colIndex) {
                var rec = grid.getStore().getAt(rowIndex);
                me.showEditForm(rec);
            }
        }]
    },
    { text:'Approval', dataIndex: 'Approval'},
    { text:'ErrorComment', dataIndex: 'ErrorComment' },
    { text:'ErrorSource', dataIndex: 'ErrorSource'},
    { text:'RecordDate', dataIndex: 'RecordDate', renderer: Ext.util.Format.dateRenderer        (Ext.Date.patterns.ShortDate)}];
    },
   height: 600,
   width: 'auto'

   });

这是编辑表格:

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

型号:

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

0 个答案:

没有答案