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.EditorGrid
  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 Roo.ViewPanel = function(container, config){
  23     Roo.ViewPanel.superclass.constructor.call(this, container, config);
  24     this.getGridEl().addClass("xedit-grid");
  25
  26     if(!this.selModel){
  27         this.selModel = new Roo.grid.CellSelectionModel();
  28     }
  29
  30     this.activeEditor = null;
  31
  32         this.addEvents({
  33             /**
  34              * @event beforeedit
  35              * Fires before cell editing is triggered. The edit event object has the following properties <br />
  36              * <ul style="padding:5px;padding-left:16px;">
  37              * <li>grid - This grid</li>
  38              * <li>record - The record being edited</li>
  39              * <li>field - The field name being edited</li>
  40              * <li>value - The value for the field being edited.</li>
  41              * <li>row - The grid row index</li>
  42              * <li>column - The grid column index</li>
  43              * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
  44              * </ul>
  45              * @param {Object} e An edit event (see above for description)
  46              */
  47             "beforeedit" : true,
  48             /**
  49              * @event afteredit
  50              * Fires after a cell is edited. <br />
  51              * <ul style="padding:5px;padding-left:16px;">
  52              * <li>grid - This grid</li>
  53              * <li>record - The record being edited</li>
  54              * <li>field - The field name being edited</li>
  55              * <li>value - The value being set</li>
  56              * <li>originalValue - The original value for the field, before the edit.</li>
  57              * <li>row - The grid row index</li>
  58              * <li>column - The grid column index</li>
  59              * </ul>
  60              * @param {Object} e An edit event (see above for description)
  61              */
  62             "afteredit" : true,
  63             /**
  64              * @event validateedit
  65              * Fires after a cell is edited, but before the value is set in the record.
  66          * You can use this to modify the value being set in the field, Return false
  67              * to cancel the change. The edit event object has the following properties <br />
  68              * <ul style="padding:5px;padding-left:16px;">
  69          * <li>editor - This editor</li>
  70              * <li>grid - This grid</li>
  71              * <li>record - The record being edited</li>
  72              * <li>field - The field name being edited</li>
  73              * <li>value - The value being set</li>
  74              * <li>originalValue - The original value for the field, before the edit.</li>
  75              * <li>row - The grid row index</li>
  76              * <li>column - The grid column index</li>
  77              * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
  78              * </ul>
  79              * @param {Object} e An edit event (see above for description)
  80              */
  81             "validateedit" : true
  82         });
  83     this.on("bodyscroll", this.stopEditing,  this);
  84     this.on(this.clicksToEdit == 1 ? "cellclick" : "celldblclick", this.onCellDblClick,  this);
  85 };
  86
  87 Roo.extend(Roo.ViewPanel, Roo.grid.Grid, {
  88     /**
  89      * @cfg {Number} clicksToEdit
  90      * The number of clicks on a cell required to display the cell's editor (defaults to 2)
  91      */
  92     clicksToEdit: 2,
  93
  94     // private
  95     isEditor : true,
  96     // private
  97     trackMouseOver: false, // causes very odd FF errors
  98     render : function()
  99     {
 100         var c = this.container;
 101         // try to detect autoHeight/width mode
 102         if((!c.dom.offsetHeight || c.dom.offsetHeight < 20) || c.getStyle("height") == "auto"){
 103             this.autoHeight = true;
 104         }
 105         var view = this.getView();
 106         view.init(this);
 107
 108         c.on("click", this.onClick, this);
 109         c.on("dblclick", this.onDblClick, this);
 110         c.on("contextmenu", this.onContextMenu, this);
 111         c.on("keydown", this.onKeyDown, this);
 112
 113         this.relayEvents(c, ["mousedown","mouseup","mouseover","mouseout","keypress"]);
 114
 115         this.getSelectionModel().init(this);
 116
 117         view.render();
 118
 119         if(this.loadMask){
 120             this.loadMask = new Roo.LoadMask(this.container,
 121                     Roo.apply({store:this.dataSource}, this.loadMask));
 122         }
 123
 124
 125         if (this.toolbar && this.toolbar.xtype) {
 126             this.toolbar.container = this.getView().getHeaderPanel(true);
 127             this.toolbar = new Roo.Toolbar(this.toolbar);
 128         }
 129         if (this.footer && this.footer.xtype) {
 130             this.footer.dataSource = this.getDataSource();
 131             this.footer.container = this.getView().getFooterPanel(true);
 132             this.footer = Roo.factory(this.footer, Roo);
 133         }
 134
 135         this.rendered = true;
 136         this.fireEvent('render', this);
 137         return this;
 138     },
 139     onCellDblClick : function(g, row, col){
 140         this.startEditing(row, col);
 141     },
 142
 143     onEditComplete : function(ed, value, startValue){
 144         this.editing = false;
 145         this.activeEditor = null;
 146         ed.un("specialkey", this.selModel.onEditorKey, this.selModel);
 147         var r = ed.record;
 148         var field = this.colModel.getDataIndex(ed.col);
 149         var e = {
 150             grid: this,
 151             record: r,
 152             field: field,
 153             originalValue: startValue,
 154             value: value,
 155             row: ed.row,
 156             column: ed.col,
 157             cancel:false,
 158             editor: ed
 159         };
 160         var cell = Roo.get(this.view.getCell(ed.row,ed.col))
 161         cell.show();
 162
 163         if(String(value) !== String(startValue)){
 164
 165             if(this.fireEvent("validateedit", e) !== false && !e.cancel){
 166                 r.set(field, e.value);
 167                 // if we are dealing with a combo box..
 168                 // then we also set the 'name' colum to be the displayField
 169                 if (ed.field.displayField && ed.field.name) {
 170                     r.set(ed.field.name, ed.field.el.dom.value);
 171                 }
 172
 173                 delete e.cancel; //?? why!!!
 174                 this.fireEvent("afteredit", e);
 175             }
 176         } else {
 177             this.fireEvent("afteredit", e); // always fire it!
 178         }
 179         this.view.focusCell(ed.row, ed.col);
 180     },
 181
 182     /**
 183      * Starts editing the specified for the specified row/column
 184      * @param {Number} rowIndex
 185      * @param {Number} colIndex
 186      */
 187     startEditing : function(row, col){
 188         this.stopEditing();
 189         if(this.colModel.isCellEditable(col, row)){
 190             this.view.ensureVisible(row, col, true);
 191
 192             var r = this.dataSource.getAt(row);
 193             var field = this.colModel.getDataIndex(col);
 194             var cell = Roo.get(this.view.getCell(row,col));
 195             var e = {
 196                 grid: this,
 197                 record: r,
 198                 field: field,
 199                 value: r.data[field],
 200                 row: row,
 201                 column: col,
 202                 cancel:false
 203             };
 204             if(this.fireEvent("beforeedit", e) !== false && !e.cancel){
 205                 this.editing = true;
 206                 var ed = this.colModel.getCellEditor(col, row);
 207
 208                 if (!ed) {
 209                     return;
 210                 }
 211                 if(!ed.rendered){
 212                     ed.render(ed.parentEl || document.body);
 213                 }
 214                 ed.field.reset();
 215
 216                 cell.hide();
 217
 218                 (function(){ // complex but required for focus issues in safari, ie and opera
 219                     ed.row = row;
 220                     ed.col = col;
 221                     ed.record = r;
 222                     ed.on("complete",   this.onEditComplete,        this,       {single: true});
 223                     ed.on("specialkey", this.selModel.onEditorKey,  this.selModel);
 224                     this.activeEditor = ed;
 225                     var v = r.data[field];
 226                     ed.startEdit(this.view.getCell(row, col), v);
 227                     // combo's with 'displayField and name set
 228                     if (ed.field.displayField && ed.field.name) {
 229                         ed.field.el.dom.value = r.data[ed.field.name];
 230                     }
 231
 232
 233                 }).defer(50, this);
 234             }
 235         }
 236     },
 237
 238     /**
 239      * Stops any active editing
 240      */
 241     stopEditing : function(){
 242         if(this.activeEditor){
 243             this.activeEditor.completeEdit();
 244         }
 245         this.activeEditor = null;
 246     },
 247
 248          /**
 249      * Called to get grid's drag proxy text, by default returns this.ddText.
 250      * @return {String}
 251      */
 252     getDragDropText : function(){
 253         var count = this.selModel.getSelectedCell() ? 1 : 0;
 254         return String.format(this.ddText, count, count == 1 ? '' : 's');
 255     }
 256
 257 });