DisplayField - How to format a date?

Question

I need to display read data only. For this, I chose the DisplayField component. My problem is that I would like a simple way to call BasicForm.setValues(values) and have a date string that automatically displays correctly on one of the displayFields screens. I did not find anything that would do this for me (e.g. the renderer function), and I'm going to just format the date string manually before calling setValues(values) . Is there any spotty way to do this?

Thanks!

Answer 1

Well, if you use direct loading of the form, you need to listen to the BaseForm event "actioncomplete". When this event fires, the handler receives two arguments. The first is BasicForm, and the second argument is an Ext.form.Action object. We are specifically looking for an Ext.form.Action.Load object. From here we get access to the result.data object of the action, and we can massage the data values ​​before this handler returns and the values ​​are loaded into the form.

 function fmtDate(sf, rec) { if ( rec[sf] ) { var dt = new Date(); dt.setTime(rec[sf] * 1000); return dt.format('lj 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 } } } }); 

Now all you need in your form is a displayField named "someFormattedDate" and your uncle's bob (Australian slang for all this). You can also achieve exactly the same goal by providing the "success:" function to call myForm.getForm (). Load (). See ExtJS Docs for Ext.form.Action.Load. Cheers, t00bs.

Answer 2

I have finished subclassing displayField. This seems to work best, but I want the fix to be fixed for something basic, like displaying a formatted date. This is my first pass, so this is just an example.

  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

I ran into the same problem because I like to pass my dates as Unix timestamps, and I had a requirement to display them using different formats depending on the context. Here is how I did it.

If you are loading data through storage, you can use the conversion function provided by Ext.data.Field. For instance:

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

Here are some conversion functions:

 function fmtDate(sf, rec) { if ( rec[sf] ) { var dt = new Date(); dt.setTime(rec[sf] * 1000); return dt.format('lj 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('lj FY h:i a'); } }; function fmtDateTimeShort(sf, rec) { if ( rec[sf] ) { var dt = new Date(); dt.setTime(rec[sf] * 1000); return dt.format('D j MY h:i a'); } }; 

Where sf is the source field, we output the formatted date string from.

Please note the following: this is important. The convert () function is presented with a copy of the data record read by the reader (this is in ExtJS docs). This means that you cannot use any associated fields in your conversions. In the array of fields above, I have a field defined as

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

So, I create a sysTestedDateObj date object from the sysTestedDateTS field, and I told the reader that I want it to give me a date object obtained from an object containing a Unix timestamp. This is a good object for future reference, but it will not be part of the data record passed to our conversion function.

Also note that the conversion function may refer to fields in records that are not defined for use by the repository. In the above example, I use the sysTestedDateTS field in the conversion function because I know that the server sends it in a JSON response, but since I did not define it in an array of fields, it will not be accessible through the storage of the consuming component.

Answer 4

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

I think dateRenderer is the rendering function you are looking for?

Answer 5

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

Raw value conversion function to display in a field.

Ext.Date.html # method-format

Formats a date with a given format string.

---

 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, 'Ymd H:i:s'); return newVal; } } ] });