PDA

View Full Version : [FIXED-423][3.1.1] Grid activeEditor BUG



elulamp
18 Dec 2009, 1:52 AM
My company just upgraded from 3.0 to 3.1. And now none of our custom grid key navigation works. It was all based on grid activeEditor property. But now it returns us always null. I looked through the 3.1 change log and didn't find anything about activeEditor being changed. So i am wondering if there is another way to finding out where my cell editor is located in the grid and what record was edited?

Animal
18 Dec 2009, 2:21 AM
I think it's mentioned in this part of the change log:



Ext.Editor, Ext.form.Field, Ext.form.TriggerField, Ext.grid.GridPanel, Ext.form.TextField, Ext.grid.CellSelectionModel, Ext.grid.EditorGrid, Ext.form.Combo, Ext.grid.RowSelectionModel, Ext.util.KeyNav

General overhaul of the key handling system to make events, especially in the editor grid, more consistent across browser and operating system


Having said that, not sure what your symptoms are, errors are etc.

elulamp
18 Dec 2009, 2:36 AM
For example i have following code:


selection_model.onEditorKey = function(field, e){
var newCell;
grid_ = this.grid;
ed = grid_.activeEditor;
if(e.getKey() == e.ENTER){
var ge_row = ed.row;
var ge_col = ed.col;
ed.completeEdit();
newCell = grid.walkCells(ge_row, ge_col+1, 1, this.acceptsNav, this);
e.stopEvent();

}
if(newCell) {
grid.startEditing(newCell[0], newCell[1]);
}

};So i want enter to stop edit and move to next editable cell. But i get following error in firebug grid_.activeEditor is null. Worked flawlessly in 3.0

Animal
18 Dec 2009, 3:07 AM
You have overridden a private function to perform some app code. That is not supported obviously... you must have examined the code to see what you could do at some point, and found out about some of the internals.

There is no publicly documented property activeEditor.

elulamp
18 Dec 2009, 3:18 AM
Mby then someone can point me to the "correct" way how to change the default key navigation in editorgrid. Btw i use rowselectionmodel.


EDIT.

Now i did some further investigation. Removed my navigation code and tried default one and found that

(http://www.extjs.com/deploy/dev/docs/source/RowSelectionModel.html#cfg-Ext.grid.RowSelectionModel-moveEditorOnEnter)moveEditorOnEnter (http://www.extjs.com/deploy/dev/docs/source/RowSelectionModel.html#cfg-Ext.grid.RowSelectionModel-moveEditorOnEnter) : Boolean - false to turn off moving the editor to the next row down when the enter key is pressed or the next row up when shift ...

does not work correctly. It works only, if the grid cell isn't of type Ext.form.TextField. If it is Ext.form.TextField, editor moves down/up but looses focus immediately. And also activeEditor is null only if i press ENTER key. With other keys it gets initialized

lukerahl
18 Dec 2009, 2:32 PM
I am having the same issue with ExtJS 3.0.3 (this worked with ExtJS 3.0.0). If you take the "Editable Grid" example and add:
sm: new Ext.grid.rowSelectionModel()
to the grid, all of the textfields and numberfields lose focus after hitting enter when editing. All other fields function correctly.

This definitely seems like a bug.

aconran
31 Dec 2009, 11:57 AM
Moving this to the bugs forum to take a look at moveEditorOnEnter. Could you please provide a full testcase and bug report?

lukerahl
4 Jan 2010, 6:45 AM
Ext version tested:

Ext 3.0 rev 3
Ext 3.1 rev 0


Adapter used:

ext


css used:

default ext-all.css




Browser versions tested against:

IE6
IE7
FF3.5 (firebug 1.4.5 installed)


Operating System:

WinXP Pro
WinVista


Description:

When adding moveEditorOnEnter to EditorGridPanel, textfields (and anything extending them i.e. numberfield) lose their focus when enter is pressed and the next row is highlighted.


Test Case:

HTML Code:


<html>
<head>
<title>Editor Grid moveEditorOnEnter Bug Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="gridEdit.js"></script>
</head>
<body>
<h1>Editor Grid moveEditorOnEnter Bug Example</h1>
<div id="editor-grid"></div>
</body>
</html>


gridEdit.js Code


Ext.onReady(function(){
var fm = Ext.form;

var cm = new Ext.grid.ColumnModel({
columns: [
{
id: 'common',
header: 'Common Name',
dataIndex: 'common',
width: 220,
editor: new fm.TextField({
allowBlank: false
})
}, {
header: 'Price',
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney',
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
})
}
]
});

var store = new Ext.data.Store({
autoDestroy: true,
url: 'plantsShort.xml',
reader: new Ext.data.XmlReader({
record: 'plant',
fields: [
{name: 'common', type: 'string'},
{name: 'price', type: 'float'}
]
})
});

var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
sm: new Ext.grid.rowSelectionModel(),
renderTo: 'editor-grid',
width: 600,
height: 300,
autoExpandColumn: 'common',
title: 'Edit Plants?',
frame: true,
clicksToEdit: 1
});
});


plantsShort.xml XML Code


<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
<plant>
<common>Bloodroot</common>
<price>2.44</price>
</plant>
<plant>
<common>Columbine</common>
<price>9.37</price>
</plant>
<plant>
<common>Marsh Marigold</common>
<price>6.81</price>
</plant>
<plant>
<common>Cowslip</common>
<price>9.90</price>
</plant>
<plant>
<common>Dutchman's-Breeches</common>
<price>6.44</price>
</plant>
<plant>
<common>Ginger, Wild</common>
<price>9.03</price>
</plant>
<plant>
<common>Hepatica</common>
<price>4.45</price>
</plant>
</catalog>


Steps to reproduce the problem:

Click on textfield ('Common Name' or 'Price' column) to enter edit mode
Hit Enter key


The result that was expected:

Next row will highlight
Editor will come up


The result that occurs instead:

Next row will highlight
Editor will come up and then go away as field loses focus


Screenshot or Video:

none


Debugging already done:

none


Possible fix:

not provided

JamesC
14 Jan 2010, 5:59 AM
Thanks for posting a test case, I have done a lot of digging and have only found out that essentially the before edit fires fine and with a breakpoint in the right place it all works fine, but something then fires a completeedit which then kills the focus etc.

It's a timing issue somehwere I think because I could not reproduce the problem having placed a breakpoint in beforeedit in firebug (the edit correctly moved from row to row after continuing the debugging). However without a breakpoint the issue reported is being seen...

mystix
14 Jan 2010, 11:38 PM
just to confirm: this happens only for the RowSelectionModel?
is the CellSelectionModel affected as well?

kohyea
19 Jan 2010, 2:20 AM
Try the override code:


Ext.override(Ext.grid.EditorGridPanel, {
startEditing : function(row, col){
this.stopEditing();
if(this.colModel.isCellEditable(col, row)){
this.view.ensureVisible(row, col, true);
var r = this.store.getAt(row),
field = this.colModel.getDataIndex(col),
e = {
grid: this,
record: r,
field: field,
value: r.data[field],
row: row,
column: col,
cancel:false
};
if(this.fireEvent("beforeedit", e) !== false && !e.cancel){
this.editing = true;
var ed = this.colModel.getCellEditor(col, row);
if(!ed){
return;
}

(function(){
if(!ed.rendered){
ed.parentEl = this.view.getEditorParent(ed);
ed.on({
scope: this,
render: {
fn: function(c){
c.field.focus(false, true);
},
single: true,
scope: this
},
specialkey: function(field, e){
this.getSelectionModel().onEditorKey(field, e);
},
complete: this.onEditComplete,
canceledit: this.stopEditing.createDelegate(this, [true])
});
}
Ext.apply(ed, {
row : row,
col : col,
record : r
});
this.lastEdit = {
row: row,
col: col
};
this.activeEditor = ed;
var v = this.preEditValue(r, field);
ed.startEdit(this.view.getCell(row, col).firstChild, Ext.isDefined(v) ? v : '');
}).defer(50, this);
}
}
}
});

mystix
19 Jan 2010, 7:08 AM
@Kohyea, that 50ms delay is what we're trying to avoid in the first place. Reintroducing it only leads to other problems with grid functionality.

Gjslick
19 Jan 2010, 3:36 PM
@mystix, It happens for CellSelectionModel as well with an editor grid.

The actual problem is in the "moving down" of the selection, in which the (same) editor's blur event is firing after the selection has been moved down. This runs onBlur(), and causes editing to stop. It's also why a little delay in the re-starting of editing will work around the problem for now.

Check out my bug report (http://www.extjs.com/forum/showthread.php?p=425975#post425975) for a full description of the root cause of this issue.


@JamesC, I replied to you in my bug post thread.

Jamie Avins
19 Jan 2010, 5:46 PM
Fixed in svn 5925.

JamesC
9 Feb 2010, 5:01 AM
I can still reproduce this in 3.1.1 adding:



,sm: new Ext.grid.RowSelectionModel()


to the edit-grid.js in examples.

mystix
9 Feb 2010, 8:53 AM
I can still reproduce this in 3.1.1 adding:



,sm: new Ext.grid.RowSelectionModel()


to the edit-grid.js in examples.

i think your test case should be


sm: new Ext.grid.RowSelectionModel({
moveEditorOnEnter: true // only works on TriggerField editors
}),

instead. it works correctly otherwise.

JamesC
10 Feb 2010, 1:24 AM
Don't quite follow, the checks for that are moveEditorOnEnter !== false, so even if I leave it undefined everything should still work. Even setting it to true still does not fix this issue and the editor does not move.

The correct behaviour (setting moveEditorOnEnter to false) causes the selection not to move, but that's not the issue. The issue is the selection moves fine, but the editor disappears on the next row.

elulamp
10 Feb 2010, 2:16 AM
Does not work for me either in 3.1.1. The editor disappears after moving to next row

mystix
10 Feb 2010, 8:46 AM
Don't quite follow, the checks for that are moveEditorOnEnter !== false, so even if I leave it undefined everything should still work. Even setting it to true still does not fix this issue and the editor does not move.

The correct behaviour (setting moveEditorOnEnter to false) causes the selection not to move, but that's not the issue. The issue is the selection moves fine, but the editor disappears on the next row.

sorry, i should have been clearer about what i was saying.

i'm saying there is still a bug because moveEditorOnEnter:true doesn't work, and that your test case should have included that config.

i'm marking this thread [REOPENED] for further review by the dev team.

Jamie Avins
10 Feb 2010, 9:19 AM
Can we get a full test-case for the specific issue not working.

mystix
10 Feb 2010, 9:49 AM
@jamie, drop the following code into examples/grid:


<html>
<head>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script>
Ext.onReady(function(){
new Ext.grid.EditorGridPanel({
renderTo: document.body,
stripeRows: true,
width: 300,
height: 140,
store: {
xtype: 'arraystore',
fields: [
{name: 'common'},
{name: 'light'}
],
data: [
['Bloodroot', 'Mostly Shady'],
['Trillium', 'Sun or Shade'],
['Marsh Marigold', 'Mostly Sunny']
]
},
columns: [{
header: 'Common Name',
dataIndex: 'common',
editor: new Ext.form.TextField({
allowBlank: false
})
}, {
header: 'Light',
dataIndex: 'light',
editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
store: {
xtype: 'arraystore',
fields: ['value', 'text'],
data: [
['Shade', 'Shade'],
['Mostly Shady', 'Mostly Shady'],
['Sun or Shade', 'Sun or Shade'],
['Mostly Sunny', 'Mostly Sunny'],
['Sunny', 'Sunny']
]
}
})
}],
sm: new Ext.grid.RowSelectionModel({
moveEditorOnEnter: true
})
});
});
</script>
</head>
<body>
</body>
</html>


Steps to reproduce the moveEditorOnEnter problem:

double-click the top-left cell in the "Common Name" column to commence editing.
press enter -- the selection correctly moves to the next row, but editing ceases.
next, double-click the top-right cell in the "Light" column to commence editing.
press enter -- the selection correctly moves to the next row, and the editor correctly remains in edit mode


conclusion: The RowSelectionModel's moveEditorOnEnter:true config works correctly only for TriggerFields in an EditorGridPanel.

tested against both the 3.1.1 & svn builds, in the following OSX browsers:

Fx 3.6
Chrome 5.x
Safari 4.0.4

Jamie Avins
10 Feb 2010, 11:02 AM
Fixed in svn.

seand
29 Mar 2010, 7:11 AM
Fixed in svn.

Hi,

Could you post what the fix was for this bug? I'd like to have the bug fixed with an override, if possible, until our next ExtJS upgrade.