X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..25ef3491bd9ae007ff1fc2b0d7943e6eaaccf775:/examples/ux/RowEditor.js diff --git a/examples/ux/RowEditor.js b/examples/ux/RowEditor.js index cff4aa30..5a8eb5e2 100644 --- a/examples/ux/RowEditor.js +++ b/examples/ux/RowEditor.js @@ -1,5 +1,5 @@ /*! - * Ext JS Library 3.0.0 + * Ext JS Library 3.0.3 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license @@ -29,6 +29,11 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, { monitorValid: true, focusDelay: 250, errorSummary: true, + + saveText: 'Save', + cancelText: 'Cancel', + commitChangesText: 'You need to commit or cancel your changes', + errorText: 'Errors', defaults: { normalWidth: true @@ -45,6 +50,13 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, { * @param {Number} rowIndex The rowIndex of the row just edited */ 'beforeedit', + /** + * @event canceledit + * Fired when the editor is cancelled. + * @param {Ext.ux.grid.RowEditor} roweditor This object + * @param {Boolean} forced True if the cancel button is pressed, false is the editor was invalid. + */ + 'canceledit', /** * @event validateedit * Fired after a row is edited and passes validation. @@ -91,7 +103,8 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, { columnresize: this.verifyLayout, columnmove: this.refreshFields, reconfigure: this.refreshFields, - destroy : this.destroy, + beforedestroy : this.beforedestroy, + destroy : this.destroy, bodyscroll: { buffer: 250, fn: this.positionButtons @@ -101,6 +114,12 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, { grid.getView().on('refresh', this.stopEditing.createDelegate(this, [])); }, + beforedestroy: function() { + this.grid.getStore().un('remove', this.onStoreRemove, this); + this.stopEditing(false); + Ext.destroy(this.btns); + }, + refreshFields: function(){ this.initFields(); this.verifyLayout(); @@ -119,17 +138,18 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, { startEditing: function(rowIndex, doFocus){ if(this.editing && this.isDirty()){ - this.showTooltip('You need to commit or cancel your changes'); + this.showTooltip(this.commitChangesText); return; } - this.editing = true; - if(typeof rowIndex == 'object'){ + if(Ext.isObject(rowIndex)){ rowIndex = this.grid.getStore().indexOf(rowIndex); } if(this.fireEvent('beforeedit', this, rowIndex) !== false){ - var g = this.grid, view = g.getView(); - var row = view.getRow(rowIndex); - var record = g.store.getAt(rowIndex); + this.editing = true; + var g = this.grid, view = g.getView(), + row = view.getRow(rowIndex), + record = g.store.getAt(rowIndex); + this.record = record; this.rowIndex = rowIndex; this.values = {}; @@ -146,7 +166,7 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, { val = this.preEditValue(record, cm.getDataIndex(i)); f = fields[i]; f.setValue(val); - this.values[f.id] = val || ''; + this.values[f.id] = Ext.isEmpty(val) ? '' : val; } this.verifyLayout(true); if(!this.isVisible()){ @@ -170,16 +190,20 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, { } if(saveChanges === false || !this.isValid()){ this.hide(); + this.fireEvent('canceledit', this, saveChanges === false); return; } - var changes = {}, r = this.record, hasChange = false; - var cm = this.grid.colModel, fields = this.items.items; + var changes = {}, + r = this.record, + hasChange = false, + cm = this.grid.colModel, + fields = this.items.items; for(var i = 0, len = cm.getColumnCount(); i < len; i++){ if(!cm.isHidden(i)){ var dindex = cm.getDataIndex(i); if(!Ext.isEmpty(dindex)){ - var oldValue = r.data[dindex]; - var value = this.postEditValue(fields[i].getValue(), oldValue, r, dindex); + var oldValue = r.data[dindex], + value = this.postEditValue(fields[i].getValue(), oldValue, r, dindex); if(String(oldValue) !== String(value)){ changes[dindex] = value; hasChange = true; @@ -189,11 +213,9 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, { } if(hasChange && this.fireEvent('validateedit', this, changes, r, this.rowIndex) !== false){ r.beginEdit(); - for(var k in changes){ - if(changes.hasOwnProperty(k)){ - r.set(k, changes[k]); - } - } + Ext.iterate(changes, function(name, value){ + r.set(name, value); + }); r.endEdit(); this.fireEvent('afteredit', this, changes, r, this.rowIndex); } @@ -203,14 +225,11 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, { verifyLayout: function(force){ if(this.el && (this.isVisible() || force === true)){ var row = this.grid.getView().getRow(this.rowIndex); - this.setSize(Ext.fly(row).getWidth(), Ext.isIE ? Ext.fly(row).getHeight() + (Ext.isBorderBox ? 9 : 0) : undefined); + this.setSize(Ext.fly(row).getWidth(), Ext.fly(row).getHeight() + 9); var cm = this.grid.colModel, fields = this.items.items; for(var i = 0, len = cm.getColumnCount(); i < len; i++){ if(!cm.isHidden(i)){ var adjust = 0; - if(i === 0){ - adjust += 0; // outer padding - } if(i === (len - 1)){ adjust += 3; // outer padding } else{ @@ -235,8 +254,8 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, { var cm = this.grid.getColumnModel(), pm = Ext.layout.ContainerLayout.prototype.parseMargins; this.removeAll(false); for(var i = 0, len = cm.getColumnCount(); i < len; i++){ - var c = cm.getColumnAt(i); - var ed = c.getEditor(); + var c = cm.getColumnAt(i), + ed = c.getEditor(); if(!ed){ ed = c.displayEditor || new Ext.form.DisplayField(); } @@ -312,12 +331,12 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, { ref: 'saveBtn', itemId: 'saveBtn', xtype: 'button', - text: this.saveText || 'Save', + text: this.saveText, width: this.minButtonWidth, handler: this.stopEditing.createDelegate(this, [true]) }, { xtype: 'button', - text: this.cancelText || 'Cancel', + text: this.cancelText, width: this.minButtonWidth, handler: this.stopEditing.createDelegate(this, [false]) }] @@ -348,11 +367,13 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, { positionButtons: function(){ if(this.btns){ - var h = this.el.dom.clientHeight; - var view = this.grid.getView(); - var scroll = view.scroller.dom.scrollLeft; - var width = view.mainBody.getWidth(); - var bw = this.btns.getWidth(); + var g = this.grid, + h = this.el.dom.clientHeight, + view = g.getView(), + scroll = view.scroller.dom.scrollLeft, + bw = this.btns.getWidth(), + width = Math.min(g.getWidth(), g.getColumnModel().getTotalWidth()); + this.btns.el.shift({left: (width/2)-(bw/2)+scroll, top: h - 2, stopFx: true, duration:0.2}); } }, @@ -370,13 +391,14 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, { doFocus: function(pt){ if(this.isVisible()){ - var index = 0; + var index = 0, + cm = this.grid.getColumnModel(), + c; if(pt){ index = this.getTargetColumnIndex(pt); } - var cm = this.grid.getColumnModel(); for(var i = index||0, len = cm.getColumnCount(); i < len; i++){ - var c = cm.getColumnAt(i); + c = cm.getColumnAt(i); if(!c.hidden && c.getEditor()){ c.getEditor().focus(); break; @@ -386,10 +408,12 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, { }, getTargetColumnIndex: function(pt){ - var grid = this.grid, v = grid.view; - var x = pt.left; - var cms = grid.colModel.config; - var i = 0, match = false; + var grid = this.grid, + v = grid.view, + x = pt.left, + cms = grid.colModel.config, + i = 0, + match = false; for(var len = cms.length, c; c = cms[i]; i++){ if(!c.hidden){ if(Ext.fly(v.getHeaderCell(i)).getRegion().right >= x){ @@ -450,21 +474,30 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, { maxWidth: 600, cls: 'errorTip', width: 300, - title: 'Errors', + title: this.errorText, autoHide: false, anchor: 'left', anchorToTarget: true, mouseOffset: [40,0] }); } - t.initTarget(this.items.last().getEl()); - if(!t.rendered){ + var v = this.grid.getView(), + top = parseInt(this.el.dom.style.top, 10), + scroll = v.scroller.dom.scrollTop, + h = this.el.getHeight(); + + if(top + h >= scroll){ + t.initTarget(this.items.last().getEl()); + if(!t.rendered){ + t.show(); + t.hide(); + } + t.body.update(msg); + t.doAutoWidth(); t.show(); + }else if(t.rendered){ t.hide(); } - t.body.update(msg); - t.doAutoWidth(); - t.show(); }, getErrorText: function(){