View Full Version : Ext.ux.grid.RowEditor : enhancement proposal

21 Nov 2010, 2:35 AM
Hi all,
i'm using roweditor intensively and i've found that some behavior should be improved :

Actually, it returns false even if the record is "new" (a phantom record).
Modified behavior : this method should return true if record is phantom.

Actually event "validateedit" is only fired when record was modified then "afteredit" event is fired only if record was modified and modifications were valid.
The problem is that it is impossible to know in the caller code that user click on "cancel" in row editor because no event is fired for cancel.
Modified behavior : event "validateedit" is fired regardless of record is modified or not (the event handler in this case must check if record fields were modified)
event "afteredit" is fired regardless of record is modified or valid. The event handler should check for record modifications.
Furthermore "afteredit" event params must be extended with a "isValid" value.

Actually, it works correctly except if editable/non-editable fields property is modified programmatically after the first initFields call.
Modified behavior : the "displayFields" array property in initFields method must be cleared, so the editable/non-editable fields list in roweditor is regenerated.

Could you all and roweditor programmer tell me if those improvements are needed and if thos modifications could be included in the original code ?
Or maybe i'm mistaken in roweditor using, so tell me where i'm wrong (:|

Code modifications :

isDirty (this code is added by extending original class)

* overrides for check if record is a new record, if so return
* "true"
isDirty : function() {
if (this.record.phantom == true) {
return true;
} else {
app.components.roweditor.superclass.isDirty.apply(this, arguments);
stopEditing (modified method, can't use inheritance)

stopEditing : function() {
this.editing = false;
if (!this.isVisible()) {
if (saveChanges === false || !this.isValid()) {
this.fireEvent('canceledit', this, saveChanges === false);
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], value = this.postEditValue(fields[i].getValue(), oldValue, r, dindex);
if (String(oldValue) !== String(value)) {
changes[dindex] = value;
hasChange = true;
* added by Yann domise : if validate event return false don't
* hide editors
var isValid = this.fireEvent('validateedit', this, changes, r, this.rowIndex);
/* end of add by yann domise */

* modified: yann domise
if (hasChange && isValid !== false)
// this.fireEvent('validateedit', this, changes, r,
// this.rowIndex) !== false)
Ext.iterate(changes, function(name, value) {
r.set(name, value);
// this.fireEvent('afteredit', this, changes, r,
// this.rowIndex);
this.fireEvent('afteredit', this, changes, r, this.rowIndex, isValid);
/* removed : yann domise */
// this.hide();
* added by yann domise : hide editor only if editing is
* validated
if (isValid)


initFields : function() {
var cm = this.grid.getColumnModel(), pm = Ext.layout.ContainerLayout.prototype.parseMargins;
* modif : Yann
* reinit displayed fields because displayable/editable fields
* could be modified since first init (says, field colmodel of
* grid was changed by code)
if (this.displayFields) {
Ext.each(this.displayFields, function() {
this.displayFields = [];
/* end of modif : Yann *

for (var i = 0, len = cm.getColumnCount(); i < len; i++) {
var c = cm.getColumnAt(i), ed = c.getEditor();
if (!ed) {
ed = c.displayEditor || new Ext.form.DisplayField();
if (i == 0) {
ed.margins = pm('0 1 2 1');
} else if (i == len - 1) {
ed.margins = pm('0 0 2 1');
} else {
if (Ext.isIE) {
ed.margins = pm('0 0 2 0');
} else {
ed.margins = pm('0 1 2 0');
ed.column = c;
if (ed.ownerCt !== this) {
ed.on('focus', this.ensureVisible, this);
ed.on('specialkey', this.onKey, this);
this.insert(i, ed);
this.initialized = true;

21 Nov 2010, 3:26 AM
humm... sorry, but modifications mentionned for initFields was for version 3.2.1 of roweditor. Seems like for 3.3.0, we have just to set 'initialized' property of roweditor to compute again display/editable fields.

Other modifications are still available for version 3.3.0 of roweditor.

6 Dec 2010, 10:08 AM
I have a grid that retrieves entries from a database as normal.

I want the user to be able to add a comment against each row and also to update the status of the record via a combo.

I do not want some of the fields to be editable so I set the first 5 columns up without an editor.

Using the out-of-the-box RowEditor plugin (Ext 3.3), I found that DisplayField's were created and placed over my existing data leading to the same text (in a different font) overlaying the uneditable columns' cells.

As a real hack, I omitted updating the newly created DisplayFields' values ...this left me with two editable columns and the 'underlying' data visible (and readable) in the first 5 columns.

Unfortunately, the Update and Cancel buttons are now glued to the left of the grid...I tried a number of ways to move them underneath the editable columns but no luck.

I am aware that 'significant' work is being done to the RowEditor component/plugin for Ext 4.0...would it be possible to allow for the buttons container to be aligned with a particular column?

Tim Toady
17 Dec 2010, 9:14 AM
I agree that the isDirty function should be checking for phantoms (though technically dirty is different from phantom so perhaps a different name or at least check for phantom in the if statement isDirty is being called). I had to modify the rowEditor to check for phantoms as well.

One thing I don't particularly care for in the rowEditor is validateedit simply causes it not to save the data if it returns false. IMO it would be preferable to somehow notify the user with a tooltip or something rather than close it and remove their changes.

Actually, why even let them press save if it is invalid.. It should behave more like the validation happening on the inputs.