4

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

谢谢！

4

5 回答 5

6

好的，如果您使用的是直接表单加载，那么您需要监听表单的 BasicForm '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() 调用提供“成功：”函数来实现完全相同的目标。有关 Ext.form.Action.Load 的信息，请参阅 ExtJS 文档。干杯，t00bs。

于 2010-12-15T05:48:53.770 回答
3

我最终继承了 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);
于 2010-12-07T20:41:20.993 回答
1

我遇到了同样的问题，因为我喜欢将日期作为 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 响应中提供它，但是因为我没有在字段数组中定义它，所以它不能通过 store 提供给消耗组件。

于 2010-12-14T04:29:49.530 回答
0

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

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

于 2010-12-07T17:46:51.400 回答
0

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;
             }
        }
    ]
});
于 2017-07-14T07:06:40.243 回答