examples/grid/edit-grid.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 Ext.onReady(function(){\r
  10     Ext.QuickTips.init();\r
  11 \r
  12     function formatDate(value){\r
  13         return value ? value.dateFormat('M d, Y') : '';\r
  14     };\r
  15     // shorthand alias\r
  16     var fm = Ext.form;\r
  17 \r
  18     // custom column plugin example\r
  19     var checkColumn = new Ext.grid.CheckColumn({\r
  20        header: "Indoor?",\r
  21        dataIndex: 'indoor',\r
  22        width: 55\r
  23     });\r
  24 \r
  25     // the column model has information about grid columns\r
  26     // dataIndex maps the column to the specific data field in\r
  27     // the data store (created below)\r
  28     var cm = new Ext.grid.ColumnModel([{\r
  29            id:'common',\r
  30            header: "Common Name",\r
  31            dataIndex: 'common',\r
  32            width: 220,\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 Ext.form.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     // this could be inline, but we want to define the Plant record\r
  77     // type so we can add records dynamically\r
  78     var Plant = Ext.data.Record.create([\r
  79            // the "name" below matches the tag name to read, except "availDate"\r
  80            // which is mapped to the tag "availability"\r
  81            {name: 'common', type: 'string'},\r
  82            {name: 'botanical', type: 'string'},\r
  83            {name: 'light'},\r
  84            {name: 'price', type: 'float'},             // automatic date conversions\r
  85            {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},\r
  86            {name: 'indoor', type: 'bool'}\r
  87       ]);\r
  88 \r
  89     // create the Data Store\r
  90     var store = new Ext.data.Store({\r
  91         // load using HTTP\r
  92         url: 'plants.xml',\r
  93 \r
  94         // the return will be XML, so lets set up a reader\r
  95         reader: new Ext.data.XmlReader({\r
  96                // records will have a "plant" tag\r
  97                record: 'plant'\r
  98            }, Plant),\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 \r
 116         tbar: [{\r
 117             text: 'Add Plant',\r
 118             handler : function(){\r
 119                 var p = new Plant({\r
 120                     common: 'New Plant 1',\r
 121                     light: 'Mostly Shade',\r
 122                     price: 0,\r
 123                     availDate: (new Date()).clearTime(),\r
 124                     indoor: false\r
 125                 });\r
 126                 grid.stopEditing();\r
 127                 store.insert(0, p);\r
 128                 grid.startEditing(0, 0);\r
 129             }\r
 130         }]\r
 131     });\r
 132 \r
 133     // trigger the data store load\r
 134     store.load();\r
 135 });\r
 136 \r
 137 Ext.grid.CheckColumn = function(config){\r
 138     Ext.apply(this, config);\r
 139     if(!this.id){\r
 140         this.id = Ext.id();\r
 141     }\r
 142     this.renderer = this.renderer.createDelegate(this);\r
 143 };\r
 144 \r
 145 Ext.grid.CheckColumn.prototype ={\r
 146     init : function(grid){\r
 147         this.grid = grid;\r
 148         this.grid.on('render', function(){\r
 149             var view = this.grid.getView();\r
 150             view.mainBody.on('mousedown', this.onMouseDown, this);\r
 151         }, this);\r
 152     },\r
 153 \r
 154     onMouseDown : function(e, t){\r
 155         if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){\r
 156             e.stopEvent();\r
 157             var index = this.grid.getView().findRowIndex(t);\r
 158             var record = this.grid.store.getAt(index);\r
 159             record.set(this.dataIndex, !record.data[this.dataIndex]);\r
 160         }\r
 161     },\r
 162 \r
 163     renderer : function(v, p, record){\r
 164         p.css += ' x-grid3-check-col-td'; \r
 165         return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'">&#160;</div>';\r
 166     }\r
 167 };