examples/grid/edit-grid.js

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