DisplayField - Как форматировать дату?

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

Спасибо!

Источник

5 ответов

Решение

Хорошо, если вы используете прямую загрузку формы, вам необходимо прослушать событие 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. Ура, тббс.

Источник

Я закончил подклассом 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'}

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

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

Источник

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

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

Источник

Ext.form.field.Display.html# CFG-визуализатор

Функция для преобразования необработанного значения для отображения в поле.

Ext.Date.html # метод формата

Форматирует дату с учетом предоставленной строки формата.

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;
             }
        }
    ]
});
Источник
Другие вопросы по тегам