Dates

by Johan Vandeplas

HTML

<script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all-dev.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.1/resources/css/ext-all.css">

JavaScript

var birtdayDate = new Date("1986-01-31 10:00:00"),
    birtdayLong = birtdayDate.getTime();

console.log('as date:', birtdayDate, 'as long:', birtdayLong);

Ext.define('Person', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id'
    }, {
        name: 'name'
    }, {
        name: 'birthday',
        type: 'date',
        dateFormat: 'time' //if you use a long as date
    }, {
        name: 'today',
        type: 'date',
        dateFormat: 'time' //if you use a long as date
    }]
});

var p = Ext.create('Person', {
        id: 1,
        name: 'Johan',
        birthday: birtdayLong,
        today: new Date().getTime()
    }),
    store = Ext.create('Ext.data.Store', {
        model: 'Person'
    });
store.add(p);

//display the date (it is a real javascript date)
console.log("the real date: ", p.get('birthday'));
console.log("the 'Y-m-d' format: ", Ext.util.Format.date(p.get('birthday'), 'Y-m-d'));
//you can define a default: (always used for grids, fields, ...)
Ext.Date.defaultFormat = "Y-m-d H:i:s";
console.log("the default format: ", Ext.util.Format.date(p.get('birthday')));


//formatting dates in a grid:
var grid = Ext.widget('grid', {
    renderTo: Ext.getBody(),
    store: store,
    columns: [
        {
            text: 'ID',
            dataIndex: 'id'
        },
        {
            text: 'Name',
            dataIndex: 'name'
        },
        {
            xtype: 'datecolumn',
            text: 'Birthday',
            dataIndex: 'birthday',
            format:'d-m-Y' //if you specify a specific date this will be shown.
        },
        {
            xtype: 'datecolumn',
            text: 'Today',
            dataIndex: 'today',
            flex: 1
        }
    ]
});