3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
10 * @class Ext.ux.grid.RowEditor
12 * Plugin (ptype = 'roweditor') that adds the ability to rapidly edit full rows in a grid.
13 * A validation mode may be enabled which uses AnchorTips to notify the user of all
14 * validation errors at once.
18 Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
22 cls: 'x-small-editor',
23 buttonAlign: 'center',
24 baseCls: 'x-row-editor',
25 elements: 'header,footer,body',
35 commitChangesText: 'You need to commit or cancel your changes',
42 initComponent: function(){
43 Ext.ux.grid.RowEditor.superclass.initComponent.call(this);
47 * Fired before the row editor is activated.
48 * If the listener returns <tt>false</tt> the editor will not be activated.
49 * @param {Ext.ux.grid.RowEditor} roweditor This object
50 * @param {Number} rowIndex The rowIndex of the row just edited
55 * Fired when the editor is cancelled.
56 * @param {Ext.ux.grid.RowEditor} roweditor This object
57 * @param {Boolean} forced True if the cancel button is pressed, false is the editor was invalid.
62 * Fired after a row is edited and passes validation.
63 * If the listener returns <tt>false</tt> changes to the record will not be set.
64 * @param {Ext.ux.grid.RowEditor} roweditor This object
65 * @param {Object} changes Object with changes made to the record.
66 * @param {Ext.data.Record} r The Record that was edited.
67 * @param {Number} rowIndex The rowIndex of the row just edited
72 * Fired after a row is edited and passes validation. This event is fired
73 * after the store's update event is fired with this edit.
74 * @param {Ext.ux.grid.RowEditor} roweditor This object
75 * @param {Object} changes Object with changes made to the record.
76 * @param {Ext.data.Record} r The Record that was edited.
77 * @param {Number} rowIndex The rowIndex of the row just edited
86 if(this.clicksToEdit === 2){
87 grid.on('rowdblclick', this.onRowDblClick, this);
89 grid.on('rowclick', this.onRowClick, this);
91 grid.on('rowdblclick', this.onRowDblClick, this);
95 // stopEditing without saving when a record is removed from Store.
96 grid.getStore().on('remove', function() {
97 this.stopEditing(false);
102 keydown: this.onGridKey,
103 columnresize: this.verifyLayout,
104 columnmove: this.refreshFields,
105 reconfigure: this.refreshFields,
106 beforedestroy : this.beforedestroy,
107 destroy : this.destroy,
110 fn: this.positionButtons
113 grid.getColumnModel().on('hiddenchange', this.verifyLayout, this, {delay:1});
114 grid.getView().on('refresh', this.stopEditing.createDelegate(this, []));
117 beforedestroy: function() {
118 this.grid.getStore().un('remove', this.onStoreRemove, this);
119 this.stopEditing(false);
120 Ext.destroy(this.btns);
123 refreshFields: function(){
130 this.items.each(function(f){
131 if(String(this.values[f.id]) !== String(f.getValue())){
139 startEditing: function(rowIndex, doFocus){
140 if(this.editing && this.isDirty()){
141 this.showTooltip(this.commitChangesText);
144 if(Ext.isObject(rowIndex)){
145 rowIndex = this.grid.getStore().indexOf(rowIndex);
147 if(this.fireEvent('beforeedit', this, rowIndex) !== false){
149 var g = this.grid, view = g.getView(),
150 row = view.getRow(rowIndex),
151 record = g.store.getAt(rowIndex);
153 this.record = record;
154 this.rowIndex = rowIndex;
157 this.render(view.getEditorParent());
159 var w = Ext.fly(row).getWidth();
161 if(!this.initialized){
164 var cm = g.getColumnModel(), fields = this.items.items, f, val;
165 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
166 val = this.preEditValue(record, cm.getDataIndex(i));
169 this.values[f.id] = Ext.isEmpty(val) ? '' : val;
171 this.verifyLayout(true);
172 if(!this.isVisible()){
173 this.setPagePosition(Ext.fly(row).getXY());
175 this.el.setXY(Ext.fly(row).getXY(), {duration:0.15});
177 if(!this.isVisible()){
178 this.show().doLayout();
180 if(doFocus !== false){
181 this.doFocus.defer(this.focusDelay, this);
186 stopEditing : function(saveChanges){
187 this.editing = false;
188 if(!this.isVisible()){
191 if(saveChanges === false || !this.isValid()){
193 this.fireEvent('canceledit', this, saveChanges === false);
199 cm = this.grid.colModel,
200 fields = this.items.items;
201 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
203 var dindex = cm.getDataIndex(i);
204 if(!Ext.isEmpty(dindex)){
205 var oldValue = r.data[dindex],
206 value = this.postEditValue(fields[i].getValue(), oldValue, r, dindex);
207 if(String(oldValue) !== String(value)){
208 changes[dindex] = value;
214 if(hasChange && this.fireEvent('validateedit', this, changes, r, this.rowIndex) !== false){
216 Ext.iterate(changes, function(name, value){
220 this.fireEvent('afteredit', this, changes, r, this.rowIndex);
225 verifyLayout: function(force){
226 if(this.el && (this.isVisible() || force === true)){
227 var row = this.grid.getView().getRow(this.rowIndex);
228 this.setSize(Ext.fly(row).getWidth(), Ext.fly(row).getHeight() + 9);
229 var cm = this.grid.colModel, fields = this.items.items;
230 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
234 adjust += 3; // outer padding
239 fields[i].setWidth(cm.getColumnWidth(i) - adjust);
245 this.positionButtons();
249 slideHide : function(){
253 initFields: function(){
254 var cm = this.grid.getColumnModel(), pm = Ext.layout.ContainerLayout.prototype.parseMargins;
255 this.removeAll(false);
256 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
257 var c = cm.getColumnAt(i),
260 ed = c.displayEditor || new Ext.form.DisplayField();
263 ed.margins = pm('0 1 2 1');
264 } else if(i == len - 1){
265 ed.margins = pm('0 0 2 1');
267 ed.margins = pm('0 1 2');
269 ed.setWidth(cm.getColumnWidth(i));
271 if(ed.ownerCt !== this){
272 ed.on('focus', this.ensureVisible, this);
273 ed.on('specialkey', this.onKey, this);
277 this.initialized = true;
280 onKey: function(f, e){
281 if(e.getKey() === e.ENTER){
282 this.stopEditing(true);
287 onGridKey: function(e){
288 if(e.getKey() === e.ENTER && !this.isVisible()){
289 var r = this.grid.getSelectionModel().getSelected();
291 var index = this.grid.store.indexOf(r);
292 this.startEditing(index);
298 ensureVisible: function(editor){
299 if(this.isVisible()){
300 this.grid.getView().ensureVisible(this.rowIndex, this.grid.colModel.getIndexById(editor.column.id), true);
304 onRowClick: function(g, rowIndex, e){
305 if(this.clicksToEdit == 'auto'){
306 var li = this.lastClickIndex;
307 this.lastClickIndex = rowIndex;
308 if(li != rowIndex && !this.isVisible()){
312 this.startEditing(rowIndex, false);
313 this.doFocus.defer(this.focusDelay, this, [e.getPoint()]);
316 onRowDblClick: function(g, rowIndex, e){
317 this.startEditing(rowIndex, false);
318 this.doFocus.defer(this.focusDelay, this, [e.getPoint()]);
321 onRender: function(){
322 Ext.ux.grid.RowEditor.superclass.onRender.apply(this, arguments);
323 this.el.swallowEvent(['keydown', 'keyup', 'keypress']);
324 this.btns = new Ext.Panel({
329 width: (this.minButtonWidth * 2) + (this.frameWidth * 2) + (this.buttonPad * 4), // width must be specified for IE
335 width: this.minButtonWidth,
336 handler: this.stopEditing.createDelegate(this, [true])
339 text: this.cancelText,
340 width: this.minButtonWidth,
341 handler: this.stopEditing.createDelegate(this, [false])
344 this.btns.render(this.bwrap);
347 afterRender: function(){
348 Ext.ux.grid.RowEditor.superclass.afterRender.apply(this, arguments);
349 this.positionButtons();
350 if(this.monitorValid){
351 this.startMonitoring();
356 if(this.monitorValid){
357 this.startMonitoring();
359 Ext.ux.grid.RowEditor.superclass.onShow.apply(this, arguments);
363 Ext.ux.grid.RowEditor.superclass.onHide.apply(this, arguments);
364 this.stopMonitoring();
365 this.grid.getView().focusRow(this.rowIndex);
368 positionButtons: function(){
371 h = this.el.dom.clientHeight,
373 scroll = view.scroller.dom.scrollLeft,
374 bw = this.btns.getWidth(),
375 width = Math.min(g.getWidth(), g.getColumnModel().getTotalWidth());
377 this.btns.el.shift({left: (width/2)-(bw/2)+scroll, top: h - 2, stopFx: true, duration:0.2});
382 preEditValue : function(r, field){
383 var value = r.data[field];
384 return this.autoEncode && typeof value === 'string' ? Ext.util.Format.htmlDecode(value) : value;
388 postEditValue : function(value, originalValue, r, field){
389 return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlEncode(value) : value;
392 doFocus: function(pt){
393 if(this.isVisible()){
395 cm = this.grid.getColumnModel(),
398 index = this.getTargetColumnIndex(pt);
400 for(var i = index||0, len = cm.getColumnCount(); i < len; i++){
401 c = cm.getColumnAt(i);
402 if(!c.hidden && c.getEditor()){
403 c.getEditor().focus();
410 getTargetColumnIndex: function(pt){
411 var grid = this.grid,
414 cms = grid.colModel.config,
417 for(var len = cms.length, c; c = cms[i]; i++){
419 if(Ext.fly(v.getHeaderCell(i)).getRegion().right >= x){
428 startMonitoring : function(){
429 if(!this.bound && this.monitorValid){
432 run : this.bindHandler,
433 interval : this.monitorPoll || 200,
439 stopMonitoring : function(){
448 this.items.each(function(f){
449 if(!f.isValid(true)){
458 bindHandler : function(){
460 return false; // stops binding
462 var valid = this.isValid();
463 if(!valid && this.errorSummary){
464 this.showTooltip(this.getErrorText().join(''));
466 this.btns.saveBtn.setDisabled(!valid);
467 this.fireEvent('validation', this, valid);
470 showTooltip: function(msg){
471 var t = this.tooltip;
473 t = this.tooltip = new Ext.ToolTip({
477 title: this.errorText,
480 anchorToTarget: true,
484 var v = this.grid.getView(),
485 top = parseInt(this.el.dom.style.top, 10),
486 scroll = v.scroller.dom.scrollTop,
487 h = this.el.getHeight();
489 if(top + h >= scroll){
490 t.initTarget(this.items.last().getEl());
498 }else if(t.rendered){
503 getErrorText: function(){
505 this.items.each(function(f){
506 if(!f.isValid(true)){
507 data.push('<li>', f.activeError, '</li>');
514 Ext.preg('roweditor', Ext.ux.grid.RowEditor);
516 Ext.override(Ext.form.Field, {
517 markInvalid : function(msg){
518 if(!this.rendered || this.preventMark){ // not rendered
521 msg = msg || this.invalidText;
523 var mt = this.getMessageHandler();
526 }else if(this.msgTarget){
527 this.el.addClass(this.invalidClass);
528 var t = Ext.getDom(this.msgTarget);
531 t.style.display = this.msgDisplay;
534 this.activeError = msg;
535 this.fireEvent('invalid', this, msg);
539 Ext.override(Ext.ToolTip, {
540 doAutoWidth : function(){
541 var bw = this.body.getTextWidth();
543 bw = Math.max(bw, this.header.child('span').getTextWidth(this.title));
545 bw += this.getFrameWidth() + (this.closable ? 20 : 0) + this.body.getPadding("lr") + 20;
546 this.setWidth(bw.constrain(this.minWidth, this.maxWidth));
548 // IE7 repaint bug on initial show
549 if(Ext.isIE7 && !this.repainted){
551 this.repainted = true;