我有一个网格和一个打开表单的操作按钮。网格中和表单上有一个不可编辑的日期字段 - 但是当我执行 updateRecord 时，网格中的数据字段值设置为 null。
我注意到两件事 - 在 ext-all 中 - 当日期被解析时 - 它不被识别为日期，而是字符串，所以当它被解析时，它应该以毫秒为单位 - 但它实际上是在 '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>
这是网格面板：
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'
}