examples/grid/edit-grid.js

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