git.roojs.org Git - roojs1/blob - examples/grid/edit-grid.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11
  12 Roo.BLANK_IMAGE_URL  = "../../images/default/s.gif";
  13  \r
  14 Roo.onReady(function(){\r
  15     Roo.QuickTips.init();\r
  16     function formatBoolean(value){\r
  17         return value ? 'Yes' : 'No';  \r
  18     };\r
  19     \r
  20     function formatDate(value){\r
  21         return value ? value.dateFormat('M d, Y') : '';\r
  22     };\r
  23     // shorthand alias\r
  24     var fm = Roo.form, Ed = Roo.grid.GridEditor;\r
  25 \r
  26     // the column model has information about grid columns\r
  27     // dataIndex maps the column to the specific data field in\r
  28     // the data store (created below)\r
  29     var cm = new Roo.grid.ColumnModel([{\r
  30            header: "Common Name",\r
  31            dataIndex: 'common',\r
  32            width: 220,\r
  33            editor: new Ed(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 Ed(new Roo.form.ComboBox({\r
  41                typeAhead: true,\r
  42                triggerAction: 'all',\r
  43                transform:'light',\r
  44                lazyRender:true\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 Ed(new fm.NumberField({\r
  53                allowBlank: false,\r
  54                allowNegative: false,\r
  55                maxValue: 10\r
  56            }))\r
  57         },{\r
  58            header: "Available",\r
  59            dataIndex: 'availDate',\r
  60            width: 95,\r
  61            renderer: formatDate,\r
  62            editor: new Ed(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            header: "Indoor?",\r
  70            dataIndex: 'indoor',\r
  71            width: 55,\r
  72            renderer: formatBoolean,\r
  73            editor: new Ed(new fm.Checkbox())\r
  74         }]);\r
  75 \r
  76     // by default columns are sortable\r
  77     cm.defaultSortable = true;\r
  78 \r
  79     // this could be inline, but we want to define the Plant record\r
  80     // type so we can add records dynamically\r
  81     var Plant = Roo.data.Record.create([\r
  82            // the "name" below matches the tag name to read, except "availDate"\r
  83            // which is mapped to the tag "availability"\r
  84            {name: 'common', type: 'string'},\r
  85            {name: 'botanical', type: 'string'},\r
  86            {name: 'light'},\r
  87            {name: 'price', type: 'float'},             // automatic date conversions\r
  88            {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},\r
  89            {name: 'indoor', type: 'bool'}\r
  90       ]);\r
  91 \r
  92     // create the Data Store\r
  93     var ds = new Roo.data.Store({\r
  94         // load using HTTP\r
  95         proxy: new Roo.data.HttpProxy({url: 'plants.xml'}),\r
  96 \r
  97         // the return will be XML, so lets set up a reader\r
  98         reader: new Roo.data.XmlReader({\r
  99                // records will have a "plant" tag\r
 100                record: 'plant'\r
 101            }, Plant)\r
 102     });\r
 103 \r
 104     // create the editor grid\r
 105     var grid = new Roo.grid.EditorGrid('editor-grid', {\r
 106         ds: ds,\r
 107         cm: cm,\r
 108         enableColLock:false\r
 109     });\r
 110 \r
 111     var layout = Roo.BorderLayout.create({\r
 112         center: {\r
 113             margins:{left:3,top:3,right:3,bottom:3},\r
 114             panels: [new Roo.GridPanel(grid)]\r
 115         }\r
 116     }, 'grid-panel');\r
 117 \r
 118 \r
 119     // render it\r
 120     grid.render();\r
 121 \r
 122     \r
 123     var gridHead = grid.getView().getHeaderPanel(true);\r
 124     var tb = new Roo.Toolbar(gridHead, [{\r
 125         text: 'Add Plant',\r
 126         handler : function(){\r
 127             var p = new Plant({\r
 128                 common: 'New Plant 1',\r
 129                 light: 'Mostly Shade',\r
 130                 price: 0,\r
 131                 availDate: new Date(),\r
 132                 indoor: false\r
 133             });\r
 134             grid.stopEditing();\r
 135             ds.insert(0, p);\r
 136             grid.startEditing(0, 0);\r
 137         }\r
 138     }]);\r
 139 \r
 140     // trigger the data store load\r
 141     ds.load();\r
 142 });