Ext JS 4: Date Display Field

Ext JS Ext.form.field.Display works well for string text, but doesn’t render dates easily. Turns out you can use the method valueToRaw to apply a formatter. Here’s a simple extension for date fields:

This is 100% inspired by this post http://www.sencha.com/forum/showthread.php?148013-How-to-invoke-a-renderer-on-a-displayfield-xtype on the Sencha forums.

To use it’s as simple as having a config on your form like so:

{
  xtype: 'datedisplayfield',
  fieldLabel : 'My Date',
  name : 'myDate'
  datePattern: 'l, F d, Y g:i:s A'
}

datePattern is optional, default it ‘Y-m-d’.

Version Info: Ext JS 4.1.1

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s