git.roojs.org Git - roojs1/blob - Roo/ViewPanel.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 /**
  13  * @class Roo.grid.ViewPanel
  14  * @extends Roo.grid.Grid
  15  * Class for creating and editable grid.
  16  * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
  17  * The container MUST have some type of size defined for the grid to fill. The container will be
  18  * automatically set to position relative if it isn't already.
  19  * @param {Object} dataSource The data model to bind to
  20  * @param {Object} colModel The column model with info about this grid's columns
  21  */
  22
  23 Roo.grid.ViewPanel = function(container, config){
  24     Roo.grid.ViewPanel.superclass.constructor.call(this, container, config);
  25     this.getGridEl().addClass("xedit-grid");
  26
  27     if(!this.selModel){
  28         this.selModel = new Roo.grid.CellSelectionModel();
  29     }
  30
  31     this.activeEditor = null;
  32
  33         this.addEvents({
  34             /**
  35              * @event beforeedit
  36              * Fires before cell editing is triggered. The edit event object has the following properties <br />
  37              * <ul style="padding:5px;padding-left:16px;">
  38              * <li>grid - This grid</li>
  39              * <li>record - The record being edited</li>
  40              * <li>field - The field name being edited</li>
  41              * <li>value - The value for the field being edited.</li>
  42              * <li>row - The grid row index</li>
  43              * <li>column - The grid column index</li>
  44              * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
  45              * </ul>
  46              * @param {Object} e An edit event (see above for description)
  47              */
  48             "beforeedit" : true,
  49             /**
  50              * @event afteredit
  51              * Fires after a cell is edited. <br />
  52              * <ul style="padding:5px;padding-left:16px;">
  53              * <li>grid - This grid</li>
  54              * <li>record - The record being edited</li>
  55              * <li>field - The field name being edited</li>
  56              * <li>value - The value being set</li>
  57              * <li>originalValue - The original value for the field, before the edit.</li>
  58              * <li>row - The grid row index</li>
  59              * <li>column - The grid column index</li>
  60              * </ul>
  61              * @param {Object} e An edit event (see above for description)
  62              */
  63             "afteredit" : true,
  64             /**
  65              * @event validateedit
  66              * Fires after a cell is edited, but before the value is set in the record.
  67          * You can use this to modify the value being set in the field, Return false
  68              * to cancel the change. The edit event object has the following properties <br />
  69              * <ul style="padding:5px;padding-left:16px;">
  70          * <li>editor - This editor</li>
  71              * <li>grid - This grid</li>
  72              * <li>record - The record being edited</li>
  73              * <li>field - The field name being edited</li>
  74              * <li>value - The value being set</li>
  75              * <li>originalValue - The original value for the field, before the edit.</li>
  76              * <li>row - The grid row index</li>
  77              * <li>column - The grid column index</li>
  78              * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
  79              * </ul>
  80              * @param {Object} e An edit event (see above for description)
  81              */
  82             "validateedit" : true
  83         });
  84     this.on("bodyscroll", this.stopEditing,  this);
  85     this.on(this.clicksToEdit == 1 ? "cellclick" : "celldblclick", this.onCellDblClick,  this);
  86 };
  87
  88
  89 Roo.extend(Roo.grid.ViewPanel, Roo.util.Observable, {
  90     /**
  91      * @cfg {Number} clicksToEdit
  92      * The number of clicks on a cell required to display the cell's editor (defaults to 2)
  93      */
  94     clicksToEdit: 2,
  95
  96     // private
  97     isEditor : true,
  98     // private
  99     trackMouseOver: false, // causes very odd FF errors
 100
 101     onCellDblClick : function(g, row, col){
 102         this.startEditing(row, col);
 103     },
 104
 105     onEditComplete : function(ed, value, startValue){
 106         this.editing = false;
 107         this.activeEditor = null;
 108         ed.un("specialkey", this.selModel.onEditorKey, this.selModel);
 109         var r = ed.record;
 110         var field = this.colModel.getDataIndex(ed.col);
 111         var e = {
 112             grid: this,
 113             record: r,
 114             field: field,
 115             originalValue: startValue,
 116             value: value,
 117             row: ed.row,
 118             column: ed.col,
 119             cancel:false,
 120             editor: ed
 121         };
 122         var cell = Roo.get(this.view.getCell(ed.row,ed.col))
 123         cell.show();
 124
 125         if(String(value) !== String(startValue)){
 126
 127             if(this.fireEvent("validateedit", e) !== false && !e.cancel){
 128                 r.set(field, e.value);
 129                 // if we are dealing with a combo box..
 130                 // then we also set the 'name' colum to be the displayField
 131                 if (ed.field.displayField && ed.field.name) {
 132                     r.set(ed.field.name, ed.field.el.dom.value);
 133                 }
 134
 135                 delete e.cancel; //?? why!!!
 136                 this.fireEvent("afteredit", e);
 137             }
 138         } else {
 139             this.fireEvent("afteredit", e); // always fire it!
 140         }
 141         this.view.focusCell(ed.row, ed.col);
 142     },
 143
 144     /**
 145      * Starts editing the specified for the specified row/column
 146      * @param {Number} rowIndex
 147      * @param {Number} colIndex
 148      */
 149     startEditing : function(row, col){
 150         this.stopEditing();
 151         if(this.colModel.isCellEditable(col, row)){
 152             this.view.ensureVisible(row, col, true);
 153
 154             var r = this.dataSource.getAt(row);
 155             var field = this.colModel.getDataIndex(col);
 156             var cell = Roo.get(this.view.getCell(row,col));
 157             var e = {
 158                 grid: this,
 159                 record: r,
 160                 field: field,
 161                 value: r.data[field],
 162                 row: row,
 163                 column: col,
 164                 cancel:false
 165             };
 166             if(this.fireEvent("beforeedit", e) !== false && !e.cancel){
 167                 this.editing = true;
 168                 var ed = this.colModel.getCellEditor(col, row);
 169
 170                 if (!ed) {
 171                     return;
 172                 }
 173                 if(!ed.rendered){
 174                     ed.render(ed.parentEl || document.body);
 175                 }
 176                 ed.field.reset();
 177
 178                 cell.hide();
 179
 180                 (function(){ // complex but required for focus issues in safari, ie and opera
 181                     ed.row = row;
 182                     ed.col = col;
 183                     ed.record = r;
 184                     ed.on("complete",   this.onEditComplete,        this,       {single: true});
 185                     ed.on("specialkey", this.selModel.onEditorKey,  this.selModel);
 186                     this.activeEditor = ed;
 187                     var v = r.data[field];
 188                     ed.startEdit(this.view.getCell(row, col), v);
 189                     // combo's with 'displayField and name set
 190                     if (ed.field.displayField && ed.field.name) {
 191                         ed.field.el.dom.value = r.data[ed.field.name];
 192                     }
 193
 194
 195                 }).defer(50, this);
 196             }
 197         }
 198     },
 199
 200     /**
 201      * Stops any active editing
 202      */
 203     stopEditing : function(){
 204         if(this.activeEditor){
 205             this.activeEditor.completeEdit();
 206         }
 207         this.activeEditor = null;
 208     },
 209
 210          /**
 211      * Called to get grid's drag proxy text, by default returns this.ddText.
 212      * @return {String}
 213      */
 214     getDragDropText : function(){
 215         var count = this.selModel.getSelectedCell() ? 1 : 0;
 216         return String.format(this.ddText, count, count == 1 ? '' : 's');
 217     }
 218 });