By Alvin Alexander. Last updated: June 24, 2016
It’s often hard to find good Sencha ExtJS examples, but I ran across this one last night. It shows how to use a date column in a Sencha grid. I’ve highlighted the date column information in the source code below:
Ext.onReady(function () { Ext.create('Ext.data.Store', { storeId: 'sampleStore', fields: [{ name: 'symbol', type: 'string' }, { name: 'date', type: 'date' }, { name: 'change', type: 'number' }, { name: 'volume', type: 'number' }, { name: 'topday', type: 'date' }], data: [{ symbol: "goog", date: '2011/04/22', change: 0.81, volume: 3053782, topday: '04/11/2010' }, { symbol: "apple", date: '2011/04/22', change: 1.35, volume: 24484858, topday: '04/28/2010' }, { symbol: "sencha", date: '2011/04/22', change: 8.85, volume: 5556351, topday: '04/22/2010' }] }); Ext.create('Ext.grid.Panel', { title: 'Date Column Demo', store: Ext.data.StoreManager.lookup('sampleStore'), columns: [{ text: 'Symbol', dataIndex: 'symbol', flex: 1 }, { text: 'Date', dataIndex: 'date', xtype: 'datecolumn', format: 'Y-m-d' }, { text: 'Change', dataIndex: 'change', xtype: 'numbercolumn', format: '0.00' }, { text: 'Volume', dataIndex: 'volume', xtype: 'numbercolumn', format: '0,000' }, { text: 'Top Day', dataIndex: 'topday', xtype: 'datecolumn', format: 'l' }], height: 200, width: 450, renderTo: Ext.getBody() }); });
I don’t have anything else to add to this example at the moment. I just wanted to help make this information easier to find, especially for me. This code comes from this link on the Sencha website: http://try.sencha.com/extjs/4.1.1/docs/Ext.grid.column.Date.1/viewer.html