Question

我需要显示数据的只读视图。我已选择DisplayField组件来执行此操作。我的问题是，我想要一种简单的方法来调用BasicForm.setValues(values)，并在其中一个displayFields中自动正确呈现日期字符串。我没有找到任何能够为我做这件事的事情（例如渲染器函数），并且我只是在调用setValues(values)之前手动格式化日期字符串。有没有一些光滑的方法来做到这一点？

谢谢！

Answer 1

好的，如果你使用的是直接表单加载，那么你需要监听表单的BasicForm'actioncomplete'事件。当此事件触发时，处理程序将提供两个参数。第一个是BasicForm，第二个参数是Ext.form.Action对象。我们专门寻找Ext.form.Action.Load对象。从这里我们可以访问action的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'的显示字段，而鲍勃是你的叔叔（澳大利亚俚语，这一切都很好）。您还可以通过为myForm.getForm（）。load（）调用提供'success：'函数来实现完全相同的功能。有关Ext.form.Action.Load的信息，请参阅ExtJS文档。干杯，t00bs。

Answer 2

我最终继承了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);

Answer 3

我遇到了同样的问题，因为我喜欢将我的日期作为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'}

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

另请注意，转换函数可以引用记录中未定义供商店使用的字段。在上面的例子中，我在转换函数中使用了字段sysTestedDateTS，因为我知道服务器在它的JSON响应中提供它，但是因为我没有在字段数组中定义它，所以它不会通过商店提供给它消费组件。

Answer 4

http://dev.sencha.com/deploy/dev/docs/?class=Ext.util.Format

我认为dateRenderer是您正在寻找的渲染器功能吗？

Answer 5

Ext.form.field.Display.html#cfg-renderer

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

Ext.Date.html#method-format

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

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

DisplayField - 如何格式化日期？

5 个答案:

Ext.form.field.Display.html#cfg-renderer

Ext.Date.html#method-format