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
  36            editor: new Ed(new fm.TextField({
  37                allowBlank: false
  38            })) */
  39         },{
  40            header: "Light",
  41            dataIndex: 'light',
  42            width: 130,
  43            editor: new Ed(new Roo.form.ComboBox({
  44                typeAhead: true,
  45                triggerAction: 'all',
  46                transform:'light',
  47                lazyRender:true
  48             }))
  49         },{
  50            header: "Price",
  51            dataIndex: 'price',
  52            width: 70,
  53            align: 'right',
  54            renderer: 'usMoney',
  55            editor: new Ed(new fm.NumberField({
  56                allowBlank: false,
  57                allowNegative: false,
  58                maxValue: 10
  59            }))
  60         },{
  61            header: "Available",
  62            dataIndex: 'availDate',
  63            width: 95,
  64            renderer: formatDate,
  65            editor: new Ed(new fm.DateField({
  66                 format: 'm/d/y',
  67                 minValue: '01/01/06',
  68                 disabledDays: [0, 6],
  69                 disabledDaysText: 'Plants are not available on the weekends'
  70             }))
  71         },{
  72            header: "Indoor?",
  73            dataIndex: 'indoor',
  74            width: 55,
  75            renderer: formatBoolean,
  76            editor: new Ed(new fm.Checkbox())
  77         }]);
  78
  79     // by default columns are sortable
  80     cm.defaultSortable = true;
  81
  82     // this could be inline, but we want to define the Plant record
  83     // type so we can add records dynamically
  84     var Plant = Roo.data.Record.create([
  85            // the "name" below matches the tag name to read, except "availDate"
  86            // which is mapped to the tag "availability"
  87            {name: 'common', type: 'string'},
  88            {name: 'botanical', type: 'string'},
  89            {name: 'light'},
  90            {name: 'price', type: 'float'},             // automatic date conversions
  91            {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
  92            {name: 'indoor', type: 'bool'}
  93       ]);
  94
  95     // create the Data Store
  96     var ds = new Roo.data.Store({
  97         // load using HTTP
  98         proxy: new Roo.data.HttpProxy({url: 'plants.xml'}),
  99         remoteSort : true,
 100
 101         // the return will be XML, so lets set up a reader
 102         reader: new Roo.data.XmlReader({
 103                // records will have a "plant" tag
 104                record: 'plant'
 105            }, Plant)
 106     });
 107
 108     // create the editor grid
 109     grid = new Roo.grid.EditorGrid('editor-grid', {
 110         ds: ds,
 111         cm: cm,
 112         enableColLock:false,
 113         multiSort : true,
 114         enableDragDrop : true,
 115
 116     });
 117
 118
 119
 120     var layout = Roo.BorderLayout.create({
 121         center: {
 122             margins:{left:3,top:3,right:3,bottom:3},
 123             panels: [new Roo.GridPanel(grid)]
 124         }
 125     }, 'grid-panel');
 126
 127
 128     // render it
 129     grid.render();
 130
 131
 132       grid.dropTarget = new Roo.dd.DropTarget(grid.view.el,  {
 133                   listeners : {
 134                       drop : function (source, e, data)
 135                       {
 136                            //Roo.log("DROP");
 137                            var t = Roo.lib.Event.getTarget(e);
 138                            var ri = grid.view.findRowIndex(t);
 139                            //Roo.log(e);
 140                            //Roo.log(data);
 141                             var dp = this.getDropPoint(e,data);
 142                           // at this point should have above or below..
 143                             var os = grid.selModel.getSelectedCell()
 144                             grid.ds.remove(data.selections[0]);
 145                             grid.ds.insert(ri + (dp == 'below' ? 1 : 0) , data.selections);
 146                             grid.selModel.select(ri + (dp == 'below' ? 1 : 0), os[1])
 147                             this.expandRow(false);
 148
 149
 150                       },
 151                       over : function (source, e, data)
 152                       {
 153                           //
 154                           // if drag point == drop point...
 155                            var t = Roo.lib.Event.getTarget(e);
 156                            var ri = grid.view.findRowIndex(t);
 157                            var dp = this.getDropPoint(e,data);
 158                            Roo.log(dp);
 159                            //Roo.log(JSON.stringify({ dp: dp,  ri: ri, src_ri: data.rowIndex}));
 160                            if(ri == data.rowIndex ||
 161                                 (dp == 'above' && ri-1 == data.rowIndex) ||
 162                                 (dp == 'below' && ri+1 == data.rowIndex)
 163                              ) {
 164                                this.expandRow(false);
 165
 166                                 this.valid = false;
 167                                 return;
 168                            }
 169                            this.expandRow(ri, dp);
 170
 171
 172                           this.valid = 'ok-add';
 173                           //Roo.log("SET VALID TO: " + this.valid)
 174                           //Roo.log([source,e,data]);
 175
 176                           // Roo.log("dragover");
 177
 178                           //Roo.log(e);
 179                           /*
 180                           var t = Roo.lib.Event.getTarget(e);
 181                           var ri = _this.grid.view.findRowIndex(t);
 182                             //            Roo.log(ri);
 183
 184                           var rid  = false;
 185                           if (ri !== false) {
 186                               rid = _this.grid.getDataSource().getAt(ri).data;
 187                           }
 188
 189                           var s = _this.grid.getSelectionModel().getSelections();
 190                            */
 191                           //if (!isFromGroup && isToGroup) {
 192                           //this.valid = 'ok-add';
 193
 194                       }
 195                   },
 196                   ddGroup : 'GridDD',
 197                   activeDom : false,
 198                   expandRow : function(ri,pos)
 199                   {
 200                         var dom = grid.view.getRow(ri);
 201                         //Roo.log(dom);
 202                         //if (this.activeDom == dom) {
 203                         //    return;
 204                         //}
 205                         if (this.activeDom) {
 206                             Roo.get(this.activeDom).removeClass('x-grid-dd-above');
 207                             Roo.get(this.activeDom).removeClass('x-grid-dd-below');
 208
 209                             this.activeDom = false;
 210                         }
 211
 212                         if (ri === false) {
 213                             return;
 214                         }
 215                         Roo.get(dom).addClass('x-grid-dd-' + pos);
 216
 217                         this.activeDom = dom;
 218
 219
 220                   },
 221                   getDropPoint : function(e, data)
 222                     {
 223                         //var tn = n.node;
 224                        // data is from griddragzone
 225
 226                         var te = Roo.lib.Event.getTarget(e);
 227                         var ri =  Roo.fly(te).findParent("td", 6);
 228
 229
 230                         var dragEl = ri;
 231                         var t = Roo.lib.Dom.getY(dragEl),
 232                             b = t + dragEl.offsetHeight;
 233                         var y = Roo.lib.Event.getPageY(e);
 234                         //var noAppend = tn.allowChildren === false || tn.isLeaf();
 235
 236                         // we may drop nodes anywhere, as long as allowChildren has not been set to false..
 237
 238
 239                         var q = (b - t) / 2;
 240
 241
 242                         if(y >= t && y < (t + q)){
 243                             return "above";
 244                         }
 245                         if(y >= b-q && y <= b){
 246                             return "below";
 247                         }
 248                         Roo.log( JSON.stringify( {pos: y, dragtop : t, mid : q, drabgot: b }));
 249
 250
 251                         return false;
 252                     },
 253               });
 254
 255
 256
 257     var gridHead = grid.getView().getHeaderPanel(true);
 258     var tb = new Roo.Toolbar(gridHead, [{
 259         text: 'Add Plant',
 260         handler : function(){
 261             var p = new Plant({
 262                 common: 'New Plant 1',
 263                 light: 'Mostly Shade',
 264                 price: 0,
 265                 availDate: new Date(),
 266                 indoor: false
 267             });
 268             grid.stopEditing();
 269             ds.insert(0, p);
 270             grid.startEditing(0, 0);
 271         }
 272     }]);
 273
 274     // trigger the data store load
 275     ds.load();
 276 });