Extjs DisplayField-如何设置日期的格式？

我需要显示数据的只读视图。我已选择DisplayField组件来执行此操作。我的问题是，我想用一种简单的方法调用

BasicForm.setValues（values）

，并在其中一个显示字段中自动正确呈现日期字符串。我还没有找到任何适合我的方法（例如渲染器函数），我只想在调用

setValues（values）

之前手动格式化日期字符串。有什么巧妙的方法可以做到这一点吗

谢谢

---

我认为dateRenderer是您正在寻找的渲染器函数？

我最终将displayField子类化。这似乎效果最好，但我希望有一个开箱即用的解决方案，用于显示格式化日期这样的基本功能。这是我第一次尝试，所以这只是一个例子

    FormattableDisplayField = Ext.extend(Ext.form.DisplayField, {

constructor:function(config) {
    var config = config || {};

    Ext.applyIf(config, {
        dateFormat:'c',
        type:null,
        displayFormat:'M d, Y'
    });


    FormattableDisplayField.superclass.constructor.call(this, config);
},

setValue: function(value) {

    if (! this.type) {
        FormattableDisplayField.superclass.setValue(value);
    }

    else if (this.type == 'date') {

        var parsedDate = Date.parseDate(value, this.dateFormat);
        if (Ext.isDate(parsedDate)) {
            this.setRawValue(parsedDate.format(this.displayFormat));
        }
        else {
            this.setRawValue(value);
        }
    }

    else if (this.formatter) {
        var formattedValue = this.formatter(value);
        this.setRawValue(formattedValue);
    }


}

});Ext.reg('formattabledisplayfield', FormattableDisplayField);

---

我遇到了同样的问题，因为我喜欢将日期作为Unix时间戳传递，并且我需要根据上下文使用不同的格式来显示它们。我是这样做的

如果通过存储加载数据，则可以使用Ext.data.Field提供的转换功能。例如：

var fields = [

  {name: 'sysTestedDateObj', mapping: 'sysTestedDateTS', type: 'date', dateFormat: 'timestamp'},

   /** Converted Fields **/
   {name: 'sysTestedDate', convert: function(v, rec){
      return fmtDate('sysTestedDateTS', rec);
   }},

   {name: 'targetChangeStartDate', convert: function(v, rec){
      return fmtDate('targetChangeStartDateTS', rec);
   }},

   {name: 'createDateTime', convert: function(v, rec){
      return fmtDateTime('createDateTS', rec);
   }},

   {name: 'modifyDateTime', convert: function(v, rec){
      return fmtDateTime('modifyDateTS', rec);
   }},
];

var store = new Ext.data.JsonStore({
  ...
  fields: fields
});

以下是一些转换函数：

function fmtDate(sf, rec) {
  if ( rec[sf] ) {
    var dt = new Date(); dt.setTime(rec[sf] * 1000); return dt.format('l j F Y');
  }
};

function fmtDateShort(sf, rec) {
  if ( rec[sf] ) {
    var dt = new Date(); dt.setTime(rec[sf] * 1000); return dt.format('D j M Y');
  }
};

function fmtDateTime(sf, rec) {
  if ( rec[sf] ) {
    var dt = new Date(); dt.setTime(rec[sf] * 1000); return dt.format('l j F Y h:i a');
  }
};

function fmtDateTimeShort(sf, rec) {
  if ( rec[sf] ) {
    var dt = new Date(); dt.setTime(rec[sf] * 1000); return dt.format('D j M Y h:i a');
  }
};

其中sf是我们从中导出格式化日期字符串的源字段

注意以下几点，这很重要。convert（）函数提供了读卡器读取的数据记录副本（在ExtJS文档中）。这意味着您不能在转换中使用任何映射字段。在上面的字段数组中，我有一个字段定义为

{name: 'sysTestedDateObj', mapping: 'sysTestedDateTS', type: 'date', dateFormat: 'timestamp'}

因此，我从SYSTESTEDDATES字段创建sysTestedDateObj date对象，并告诉读者，我希望它为我提供一个从包含Unix时间戳的对象派生的日期对象。这是一个很好的对象，以后可以使用，但它不会成为传递给转换函数的数据记录的一部分

---

还要注意，转换函数可以引用记录中未定义供存储使用的字段。在上面的示例中，我在转换函数中使用了SYSTESTEDDATES字段，因为我知道服务器在其JSON响应中提供了它，但是，因为我没有在字段数组中定义它，它将无法通过存储区提供给消费组件。

好的，如果您使用的是直接表单加载，那么您需要侦听表单的基本表单“actioncomplete”事件。当此事件激发时，将向处理程序提供两个参数。第一个参数是BasicForm，第二个参数是Ext.form.Action对象。我们专门寻找Ext.form.Action.Load对象。从这里，我们可以访问操作的result.data对象，并且可以在该处理程序返回并将值加载到表单之前对数据值进行处理

function fmtDate(sf, rec) {
  if ( rec[sf] ) {
    var dt = new Date(); dt.setTime(rec[sf] * 1000); return dt.format('l j F Y');
  }
};

myForm.getForm().on({
  actioncomplete: function(form, action) {
    if (action.type === 'load') {
      if (action.result.success) {
        var data = action.result.data;
        data.someFormattedDate = fmtDate('myDateTS', data);
      } else {
        //handle an error here
      }
    }
  }
});

现在，表单中只需要一个名为“someFormattedDate”的显示字段和Bob的叔叔（澳大利亚俚语，意为“一切都好”）。通过为myForm.getForm（）.load（）调用提供一个“success:”函数，也可以实现完全相同的效果。有关Ext.form.Action.Load，请参阅ExtJS文档。 干杯，t00bs

用于转换原始值以在字段中显示的函数

根据提供的格式字符串格式化日期

---

---

谢谢你给我看！问题不在于格式，而在于表单组件displayField中日期的显示。当

BasicForm.setValues（）

在其字段组件上调用

setValue（）

时，我正在寻找一种获取值的方法。这在将数据加载到存储时肯定会起作用。我的问题是处理从AJAX请求返回的原始JSON，该请求用于通过BasicForm.loadRecord（[raw JSON STUFF HERE]）填充表单。除非可以挂接组件的setValue（）方法，否则没有简单的方法加载日期格式的字符串并在字段中显示为日期。谢谢你的回复。啊！这是我一直在寻找的失踪听众。谢谢提交。

var data = {
    "OrderNo": "2017071200000246",
    "Createtime": "2017/7/12 13:16:42"
}; // your read only data; or use bind store

var form = Ext.create({
    xtype: 'form',
    defaultType: 'displayfield',
    defaults: {
        labelWidth: 120,
        labelSeparator: ':'
    },
    items: [
        { fieldLabel: 'Order Number', value: data.OrderNo },
        { fieldLabel: 'Create Time', value: data.Createtime,  
             renderer: function (value, field) {
                 var date = new Date(value);
                 var newVal = Ext.Date.format(date, 'Y-m-d H:i:s');
                 return newVal;
             }
        }
    ]
});