docs/guides/grid/examples/renderers/app.js

   1 /**
   2  * @example Renderers
   3  *
   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.
   6  */
   7 Ext.require('Ext.data.Store');
   8 Ext.require('Ext.grid.Panel');
   9
  10 Ext.define('User', {
  11     extend: 'Ext.data.Model',
  12     fields: [
  13         { name: 'name', type: 'string' },
  14         { name: 'email', type: 'string' },
  15         { name: 'birthDate', type: 'date' }
  16     ]
  17 });
  18
  19 Ext.onReady(function() {
  20
  21     var userStore = Ext.create('Ext.data.Store', {
  22         model: 'User',
  23         data: [
  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) }
  28         ]
  29     });
  30
  31     Ext.create('Ext.grid.Panel', {
  32         renderTo: Ext.getBody(),
  33         store: userStore,
  34         width: 500,
  35         height: 300,
  36         title: 'Application Users',
  37         columns: [
  38             {
  39                 text: 'Name',
  40                 width: 150,
  41                 dataIndex: 'name'
  42             },
  43             {
  44                 text: 'Birth Date',
  45                 width: 75,
  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')
  49             },
  50             {
  51                 text: 'Email Address',
  52                 flex: 1,
  53                 dataIndex: 'email',
  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);
  57                 }
  58             }
  59         ]
  60     });
  61
  62 });