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
  14 var grid = false;
  15
  16 Roo.onReady(function(){
  17     Roo.QuickTips.init();
  18     function formatBoolean(value){
  19         return value ? 'Yes' : 'No';
  20     };
  21
  22     function formatDate(value){
  23         return value ? value.dateFormat('M d, Y') : '';
  24     };
  25     // shorthand alias
  26     var fm = Roo.form, Ed = Roo.grid.GridEditor;
  27
  28     // the column model has information about grid columns
  29     // dataIndex maps the column to the specific data field in
  30     // the data store (created below)
  31     var cm = new Roo.grid.ColumnModel([{
  32            header: "Common Name",
  33            dataIndex: 'common',
  34            width: 220,
  35            editor: new Ed(new fm.TextField({
  36                allowBlank: false
  37            }))
  38         },{
  39            header: "Light",
  40            dataIndex: 'light',
  41            width: 130,
  42            editor: new Ed(new Roo.form.ComboBox({
  43                typeAhead: true,
  44                triggerAction: 'all',
  45                transform:'light',
  46                lazyRender:true
  47             }))
  48         },{
  49            header: "Price",
  50            dataIndex: 'price',
  51            width: 70,
  52            align: 'right',
  53            renderer: 'usMoney',
  54            editor: new Ed(new fm.NumberField({
  55                allowBlank: false,
  56                allowNegative: false,
  57                maxValue: 10
  58            }))
  59         },{
  60            header: "Available",
  61            dataIndex: 'availDate',
  62            width: 95,
  63            renderer: formatDate,
  64            editor: new Ed(new fm.DateField({
  65                 format: 'm/d/y',
  66                 minValue: '01/01/06',
  67                 disabledDays: [0, 6],
  68                 disabledDaysText: 'Plants are not available on the weekends'
  69             }))
  70         },{
  71            header: "Indoor?",
  72            dataIndex: 'indoor',
  73            width: 55,
  74            renderer: formatBoolean,
  75            editor: new Ed(new fm.Checkbox())
  76         }]);
  77
  78     // by default columns are sortable
  79     cm.defaultSortable = true;
  80
  81     // this could be inline, but we want to define the Plant record
  82     // type so we can add records dynamically
  83     var Plant = Roo.data.Record.create([
  84            // the "name" below matches the tag name to read, except "availDate"
  85            // which is mapped to the tag "availability"
  86            {name: 'common', type: 'string'},
  87            {name: 'botanical', type: 'string'},
  88            {name: 'light'},
  89            {name: 'price', type: 'float'},             // automatic date conversions
  90            {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
  91            {name: 'indoor', type: 'bool'}
  92       ]);
  93
  94     // create the Data Store
  95     var ds = new Roo.data.Store({
  96         // load using HTTP
  97         proxy: new Roo.data.HttpProxy({url: 'plants.xml'}),
  98         remoteSort : true,
  99
 100         // the return will be XML, so lets set up a reader
 101         reader: new Roo.data.XmlReader({
 102                // records will have a "plant" tag
 103                record: 'plant'
 104            }, Plant)
 105     });
 106
 107     // create the editor grid
 108     grid = new Roo.grid.EditorGrid('editor-grid', {
 109         ds: ds,
 110         cm: cm,
 111         enableColLock:false,
 112         multiSort : true
 113     });
 114
 115     var layout = Roo.BorderLayout.create({
 116         center: {
 117             margins:{left:3,top:3,right:3,bottom:3},
 118             panels: [new Roo.GridPanel(grid)]
 119         }
 120     }, 'grid-panel');
 121
 122
 123     // render it
 124     grid.render();
 125
 126
 127     var gridHead = grid.getView().getHeaderPanel(true);
 128     var tb = new Roo.Toolbar(gridHead, [{
 129         text: 'Add Plant',
 130         handler : function(){
 131             var p = new Plant({
 132                 common: 'New Plant 1',
 133                 light: 'Mostly Shade',
 134                 price: 0,
 135                 availDate: new Date(),
 136                 indoor: false
 137             });
 138             grid.stopEditing();
 139             ds.insert(0, p);
 140             grid.startEditing(0, 0);
 141         }
 142     }]);
 143
 144     // trigger the data store load
 145     ds.load();
 146 });