ExtJS6 Grid的日期编辑栏位处理

文章目录

问题描述问题分析解决方法

问题描述

定义一个带编辑列的Grid，定义的方式是Columns的某个Column使用’widgetcolumn’定义

{ text : ‘Planned Value’, dataIndex : ‘planDate’, xtype : ‘widgetcolumn’, widget :{ xtype : ‘datefield’, format:‘Y/m/d’, bind: ‘{record.planDate}’ } }

保存的时候，通过 var modifiedRecords = store.getModifiedRecords(); 得到修改过的行，通过 Ajax呼叫后端服务更新

var modifyRecords = modifiedRecords.map(function(x) {

return { obid : x.get("obid"), planDate : x.get("planDate") }

}

问题分析

但是存在的问题是：

编辑后的进入的显示不正确， 会显示日期对象，而不是’Y/m/d’。

保存的时候数据会清空。 原因： 编辑后的数据绑定回Store是Date型的，但是从后端取的是String类型的。

解决方法

类型转换 { text : ‘Planned Value’, dataIndex : ‘planDate’, format:‘Y/m/d’, flex : 2, renderer: function(val){ if(val == null) return “”;

return Ext.Date.format(new Date(val), 'Y/m/d'); }

}

保存是类型转换 var param = modifiedRecord.map(function(x) { var planDate = x.get(“planDate”); if(planDate!=null&&(planDate instanceof Date)){ planDate = Ext.Date.format(x.get(“planDate”), “Y/m/d”); } return { obid : x.get(“obid”), planDate : planDate } });