View Full Version : RowEditor does not sync with the grid

15 Jul 2010, 9:16 AM
I am testing the RowEditor example at http://www.sencha.com/deploy/dev/examples/grid/row-editor.html on IE8.

I am getting some problem where the Columns on the RowEditor are not in sync with the column on the Grid itself.

These are the step to re-produce the problem.
1. I click on a row to view the data in a RowEditor, and I click the "Cancel" button.
2. I moved some columns around, and I open the RowEditor again.

The screen shot below is only showing start date as editable field, and you don't see the other column in the RowEditor.

The screen shot below shows the columns in the RowEditor are not align with the Grid

Anybody know the work around for this issue?


28 Jul 2010, 12:30 PM
I am developing an application using the RowEditor and see the same problem. I checked the examples using RowEditor and actually none of them works properly. I see two distinct problems that can be reproduced easily in various browsers:

1) After grid columns are resized, the editor fields don't line up anymore with the grid columns
2) After grid columns have been moved around, the editor display is completely messed up as shown in screen shot 1 of the first post.

After some debugging today, I found a solution for problem 1). I had to modify function verifyLayout() of RowEditor. I added the line in red.

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() + 9 : undefined);
var cm = this.grid.colModel, fields = this.items.items;
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
var adjust = 0;
if(i === (len - 1)){
adjust += 3; // outer padding
} else{
adjust += 1;
var width = cm.getColumnWidth(i);
fields[i].setWidth(width - adjust);
fields[i].width = width - adjust; // Added this line
} else{
This is puzzling since the width of the editor fields are set just on the line before. It seems that setWidth() only sets the width of the DOM elements but not of the corresponding JS model objects.

If anyone finds out more about these problems I am very interested to hear about it.

30 Jul 2010, 4:31 AM
I just noticed that this problem has been discussed and solved in this thread: http://www.sencha.com/forum/showthread.php?92140-OPEN-575-roweditor-column-drag-drop-resize-problems/page3&highlight=roweditor+sync