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

   1 /**
   2  * @example Row Editing
   3  *
   4  * This grid demonstrates row editing capabilities.
   5  */
   6 Ext.require('Ext.data.Store');
   7 Ext.require('Ext.grid.Panel');
   8 Ext.require('Ext.form.field.Text');
   9 Ext.require('Ext.form.field.Date');
  10 Ext.require('Ext.form.field.Display');
  11 Ext.require('Ext.grid.plugin.RowEditing');
  12
  13 Ext.define('User', {
  14     extend: 'Ext.data.Model',
  15     fields: [
  16         { name: 'name', type: 'string' },
  17         { name: 'email', type: 'string' },
  18         { name: 'phone', type: 'string' },
  19         { name: 'birthDate', type: 'date' }
  20     ]
  21 });
  22
  23 Ext.onReady(function() {
  24
  25     var userStore = Ext.create('Ext.data.Store', {
  26         model: 'User',
  27         data: {
  28             items: [
  29                 { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224', birthDate: new Date(1981, 9, 28) },
  30                 { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234', birthDate: new Date(1979, 4, 1) },
  31                 { name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244', birthDate: new Date(1956, 3, 15) },
  32                 { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254', birthDate: new Date(1954, 10, 1) }
  33             ]
  34         },
  35
  36         proxy: {
  37             type: 'memory',
  38             reader: {
  39                 type: 'json',
  40                 root: 'items'
  41             }
  42         }
  43
  44     });
  45
  46     Ext.create('Ext.grid.Panel', {
  47         renderTo: Ext.getBody(),
  48         store: userStore,
  49         width: 400,
  50         height: 200,
  51         title: 'Application Users',
  52         columns: [
  53             {
  54                 text: 'Name',
  55                 flex: 1,
  56                 hideable: false,
  57                 dataIndex: 'name',
  58                 editor: {
  59                     //use a Ext.form.field.Text as the editor
  60                     xtype: 'textfield',
  61                     //prevent empty values from being inserted into this field
  62                     allowBlank: false
  63                 }
  64             },
  65             {
  66                 text: 'Email Address',
  67                 width: 130,
  68                 dataIndex: 'email',
  69                 //use a Ext.form.field.Text as the editor
  70                 editor: 'textfield'
  71             },
  72             {
  73                 text: 'Phone Number',
  74                 width: 85,
  75                 dataIndex: 'phone'
  76             },
  77             {
  78                 text: 'Birth Date',
  79                 width: 90,
  80                 dataIndex: 'birthDate',
  81                 //use a Ext.form.field.Date as the editor
  82                 editor: 'datefield',
  83                 // format the date using a renderer from the Ext.util.Format class
  84                 renderer: Ext.util.Format.dateRenderer('m/d/Y')
  85             }
  86         ],
  87         selType: 'rowmodel',
  88         plugins: [
  89             Ext.create('Ext.grid.plugin.RowEditing', {
  90                 clicksToEdit: 1
  91             })
  92         ]
  93     });
  94
  95 });