examples/grid/cell-editing.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.Loader.setConfig({
  16     enabled: true
  17 });
  18 Ext.Loader.setPath('Ext.ux', '../ux');
  19
  20 Ext.require([
  21     'Ext.selection.CellModel',
  22     'Ext.grid.*',
  23     'Ext.data.*',
  24     'Ext.util.*',
  25     'Ext.state.*',
  26     'Ext.form.*',
  27     'Ext.ux.CheckColumn'
  28 ]);
  29
  30 Ext.onReady(function(){
  31
  32     function formatDate(value){
  33         return value ? Ext.Date.dateFormat(value, 'M d, Y') : '';
  34     }
  35
  36     Ext.define('Plant', {
  37         extend: 'Ext.data.Model',
  38         fields: [
  39             // the 'name' below matches the tag name to read, except 'availDate'
  40             // which is mapped to the tag 'availability'
  41             {name: 'common', type: 'string'},
  42             {name: 'botanical', type: 'string'},
  43             {name: 'light'},
  44             {name: 'price', type: 'float'},
  45             // dates can be automatically converted by specifying dateFormat
  46             {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
  47             {name: 'indoor', type: 'bool'}
  48         ]
  49     });
  50
  51
  52     // create the Data Store
  53     var store = Ext.create('Ext.data.Store', {
  54         // destroy the store if the grid is destroyed
  55         autoDestroy: true,
  56         model: 'Plant',
  57         proxy: {
  58             type: 'ajax',
  59             // load remote data using HTTP
  60             url: 'plants.xml',
  61             // specify a XmlReader (coincides with the XML format of the returned data)
  62             reader: {
  63                 type: 'xml',
  64                 // records will have a 'plant' tag
  65                 record: 'plant'
  66             }
  67         },
  68         sorters: [{
  69             property: 'common',
  70             direction:'ASC'
  71         }]
  72     });
  73
  74     var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
  75         clicksToEdit: 1
  76     });
  77
  78     // create the grid and specify what field you want
  79     // to use for the editor at each header.
  80     var grid = Ext.create('Ext.grid.Panel', {
  81         store: store,
  82         columns: [{
  83             id: 'common',
  84             header: 'Common Name',
  85             dataIndex: 'common',
  86             flex: 1,
  87             editor: {
  88                 allowBlank: false
  89             }
  90         }, {
  91             header: 'Light',
  92             dataIndex: 'light',
  93             width: 130,
  94             editor: {
  95                 xtype: 'combobox',
  96                 typeAhead: true,
  97                 triggerAction: 'all',
  98                 selectOnTab: true,
  99                 store: [
 100                     ['Shade','Shade'],
 101                     ['Mostly Shady','Mostly Shady'],
 102                     ['Sun or Shade','Sun or Shade'],
 103                     ['Mostly Sunny','Mostly Sunny'],
 104                     ['Sunny','Sunny']
 105                 ],
 106                 lazyRender: true,
 107                 listClass: 'x-combo-list-small'
 108             }
 109         }, {
 110             header: 'Price',
 111             dataIndex: 'price',
 112             width: 70,
 113             align: 'right',
 114             renderer: 'usMoney',
 115             editor: {
 116                 xtype: 'numberfield',
 117                 allowBlank: false,
 118                 minValue: 0,
 119                 maxValue: 100000
 120             }
 121         }, {
 122             header: 'Available',
 123             dataIndex: 'availDate',
 124             width: 95,
 125             renderer: formatDate,
 126             editor: {
 127                 xtype: 'datefield',
 128                 format: 'm/d/y',
 129                 minValue: '01/01/06',
 130                 disabledDays: [0, 6],
 131                 disabledDaysText: 'Plants are not available on the weekends'
 132             }
 133         }, {
 134             xtype: 'checkcolumn',
 135             header: 'Indoor?',
 136             dataIndex: 'indoor',
 137             width: 55
 138         }],
 139         selModel: {
 140             selType: 'cellmodel'
 141         },
 142         renderTo: 'editor-grid',
 143         width: 600,
 144         height: 300,
 145         title: 'Edit Plants?',
 146         frame: true,
 147         tbar: [{
 148             text: 'Add Plant',
 149             handler : function(){
 150                 // Create a model instance
 151                 var r = Ext.create('Plant', {
 152                     common: 'New Plant 1',
 153                     light: 'Mostly Shady',
 154                     price: 0,
 155                     availDate: Ext.Date.clearTime(new Date()),
 156                     indoor: false
 157                 });
 158                 store.insert(0, r);
 159                 cellEditing.startEditByPosition({row: 0, column: 0});
 160             }
 161         }],
 162         plugins: [cellEditing]
 163     });
 164
 165     // manually trigger the data store load
 166     store.load({
 167         // store loading is asynchronous, use a load listener or callback to handle results
 168         callback: function(){
 169             Ext.Msg.show({
 170                 title: 'Store Load Callback',
 171                 msg: 'store was loaded, data available for processing',
 172                 modal: false,
 173                 icon: Ext.Msg.INFO,
 174                 buttons: Ext.Msg.OK
 175             });
 176         }
 177     });
 178 });
 179