4 * This grid demonstrates the use of a couple different custom renderers.
5 * The birth date field is rendered using a date formatter, and the email address is rendered as a hyperlink.
7 Ext.require('Ext.data.Store');
8 Ext.require('Ext.grid.Panel');
11 extend: 'Ext.data.Model',
13 { name: 'name', type: 'string' },
14 { name: 'email', type: 'string' },
15 { name: 'birthDate', type: 'date' }
19 Ext.onReady(function() {
21 var userStore = Ext.create('Ext.data.Store', {
24 { name: 'Lisa', email: 'lisa@simpsons.com', birthDate: new Date(1981, 9, 28) },
25 { name: 'Bart', email: 'bart@simpsons.com', birthDate: new Date(1979, 4, 1) },
26 { name: 'Homer', email: 'home@simpsons.com', birthDate: new Date(1956, 3, 15) },
27 { name: 'Marge', email: 'marge@simpsons.com', birthDate: new Date(1954, 10, 1) }
31 Ext.create('Ext.grid.Panel', {
32 renderTo: Ext.getBody(),
36 title: 'Application Users',
46 dataIndex: 'birthDate',
47 // format the date using a renderer from the Ext.util.Format class
48 renderer: Ext.util.Format.dateRenderer('m/d/Y')
51 text: 'Email Address',
54 // format the email address using a custom renderer
55 renderer: function(value) {
56 return Ext.String.format('<a href="mailto:{0}">{1}</a>', value, value);