docs/source/edit-grid.html

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