DisplayField - Как форматировать для даты? - PullRequest
4 голосов
/ 07 декабря 2010

Мне нужно отобразить данные только для чтения. Я выбрал компонент DisplayField для этого. Моя проблема в том, что мне нужен простой способ вызова BasicForm.setValues(values), чтобы строка даты автоматически отображалась правильно в одном из полей displayFields. Я не нашел ничего, что могло бы сделать это для меня (например, функцию рендерера), и собираюсь просто отформатировать строку даты вручную перед вызовом setValues(values). Есть какой-нибудь отличный способ сделать это?

Спасибо!

Ответы [ 5 ]

6 голосов
/ 15 декабря 2010

Хорошо, если вы используете прямую загрузку формы, вам нужно прослушать событие actionFplete формы BasicForm формы.Когда это событие срабатывает, обработчику предоставляется два аргумента.Первым является 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
      }
    }
  }
});

Теперь все, что вам нужно в вашей форме, этоdisplayField с именем 'someFormattedDate' и Боб - твой дядя (жаргонный австралийский язык, потому что все хорошо).Вы также можете добиться того же самого, предоставив функцию 'success:' своему вызову myForm.getForm (). Load ().См. Документы ExtJS для Ext.form.Action.Load.Приветствия, tbsb.

3 голосов
/ 07 декабря 2010

Я закончил подклассом 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);
1 голос
/ 14 декабря 2010

Я столкнулся с этой же проблемой, потому что мне нравится передавать свои даты как метки времени 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'}

Итак, я создаю объект даты sysTestedDateObj из поля sysTestedDateTS, и я сказал читателю, что хочу, чтобы он предоставил мне объект даты, полученный из объекта, содержащего метку времени Unix. Это хороший объект для дальнейшего использования, но он не будет частью записи данных, передаваемой нашей функции преобразования.

Также обратите внимание, что функция преобразования может ссылаться на поля в записи, которые не определены для использования хранилищем. В приведенном выше примере я использовал поле sysTestedDateTS в функции преобразования, потому что я знаю, что сервер предоставляет его в своем ответе JSON, но поскольку я не определил его в массиве полей, он не будет доступен через хранилище для потребляющий компонент.

0 голосов
/ 14 июля 2017

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;
             }
        }
    ]
});
0 голосов
/ 07 декабря 2010

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

Я думаю, dateRenderer - это функция визуализации, которую вы ищете?

...