examples/grid/cell-editing.js

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