examples/grid/edit-grid.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 Ext.onReady(function(){
   8
   9     /**
  10      * Handler specified for the 'Available' column renderer
  11      * @param {Object} value
  12      */
  13     function formatDate(value){
  14         return value ? value.dateFormat('M d, Y') : '';
  15     }
  16
  17     // shorthand alias
  18     var fm = Ext.form;
  19
  20     // the column model has information about grid columns
  21     // dataIndex maps the column to the specific data field in
  22     // the data store (created below)
  23     var cm = new Ext.grid.ColumnModel({
  24         // specify any defaults for each column
  25         defaults: {
  26             sortable: true // columns are not sortable by default
  27         },
  28         columns: [{
  29             id: 'common',
  30             header: 'Common Name',
  31             dataIndex: 'common',
  32             width: 220,
  33             // use shorthand alias defined above
  34             editor: new fm.TextField({
  35                 allowBlank: false
  36             })
  37         }, {
  38             header: 'Light',
  39             dataIndex: 'light',
  40             width: 130,
  41             editor: new fm.ComboBox({
  42                 typeAhead: true,
  43                 triggerAction: 'all',
  44                 // transform the data already specified in html
  45                 transform: 'light',
  46                 lazyRender: true,
  47                 listClass: 'x-combo-list-small'
  48             })
  49         }, {
  50             header: 'Price',
  51             dataIndex: 'price',
  52             width: 70,
  53             align: 'right',
  54             renderer: 'usMoney',
  55             editor: new fm.NumberField({
  56                 allowBlank: false,
  57                 allowNegative: false,
  58                 maxValue: 100000
  59             })
  60         }, {
  61             header: 'Available',
  62             dataIndex: 'availDate',
  63             width: 95,
  64             renderer: formatDate,
  65             editor: new fm.DateField({
  66                 format: 'm/d/y',
  67                 minValue: '01/01/06',
  68                 disabledDays: [0, 6],
  69                 disabledDaysText: 'Plants are not available on the weekends'
  70             })
  71         }, {
  72             xtype: 'checkcolumn',
  73             header: 'Indoor?',
  74             dataIndex: 'indoor',
  75             width: 55
  76         }]
  77     });
  78
  79     // create the Data Store
  80     var store = new Ext.data.Store({
  81         // destroy the store if the grid is destroyed
  82         autoDestroy: true,
  83
  84         // load remote data using HTTP
  85         url: 'plants.xml',
  86
  87         // specify a XmlReader (coincides with the XML format of the returned data)
  88         reader: new Ext.data.XmlReader({
  89             // records will have a 'plant' tag
  90             record: 'plant',
  91             // use an Array of field definition objects to implicitly create a Record constructor
  92             fields: [
  93                 // the 'name' below matches the tag name to read, except 'availDate'
  94                 // which is mapped to the tag 'availability'
  95                 {name: 'common', type: 'string'},
  96                 {name: 'botanical', type: 'string'},
  97                 {name: 'light'},
  98                 {name: 'price', type: 'float'},
  99                 // dates can be automatically converted by specifying dateFormat
 100                 {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
 101                 {name: 'indoor', type: 'bool'}
 102             ]
 103         }),
 104
 105         sortInfo: {field:'common', direction:'ASC'}
 106     });
 107
 108     // create the editor grid
 109     var grid = new Ext.grid.EditorGridPanel({
 110         store: store,
 111         cm: cm,
 112         renderTo: 'editor-grid',
 113         width: 600,
 114         height: 300,
 115         autoExpandColumn: 'common', // column with this id will be expanded
 116         title: 'Edit Plants?',
 117         frame: true,
 118         clicksToEdit: 1,
 119         tbar: [{
 120             text: 'Add Plant',
 121             handler : function(){
 122                 // access the Record constructor through the grid's store
 123                 var Plant = grid.getStore().recordType;
 124                 var p = new Plant({
 125                     common: 'New Plant 1',
 126                     light: 'Mostly Shade',
 127                     price: 0,
 128                     availDate: (new Date()).clearTime(),
 129                     indoor: false
 130                 });
 131                 grid.stopEditing();
 132                 store.insert(0, p);
 133                 grid.startEditing(0, 0);
 134             }
 135         }]
 136     });
 137
 138     // manually trigger the data store load
 139     store.load({
 140         // store loading is asynchronous, use a load listener or callback to handle results
 141         callback: function(){
 142             Ext.Msg.show({
 143                 title: 'Store Load Callback',
 144                 msg: 'store was loaded, data available for processing',
 145                 modal: false,
 146                 icon: Ext.Msg.INFO,
 147                 buttons: Ext.Msg.OK
 148             });
 149         }
 150     });
 151 });