View Full Version : Using RowEditor - resizing edited row height in edit mode

14 Apr 2011, 4:23 AM

I want to combine the functionalities of a RowEditor with that of an Expander. But I do not want to expand the row if I click on a "+" icon (in fact I omitted adding the expander to my column configs list). The row that is edited should adjust it's height when clicked - of course the other rows under it have to adjust their top positions accordingly.
So far I can expand the row when clicked, but it only works partially. I see that some parts of the row are expanded, but they seem to be in another layer. And the rows under the edited row do not adjust their top positions.
I also wonder whether I need an Expander at all. Is it better to manually adjust the row height somehow? How can I get the proper element to do so?


14 Apr 2011, 10:06 PM
Hi again,

I found a solution to implement my own expander via override of the RowEditor class behavior. Please see the code below.

private ExpandableRowEditor( ColumnModel cm, RowExpander expander, Grid<Plant> grid) {
this.cm = cm;
this.expander = expander;
this.grid = grid;

protected void onRowClick( GridEvent<Plant> e ) {
if( e.getColIndex() > 0 ) {
if( !this.isEditing() ) {

this.clickedRow = e.getRowIndex();
El row = new El((Element)grid.getView().getRow(e.getRowIndex()));
row.setHeight( "64px" );

super.onRowClick( e );



protected void onHide() {
El row = new El((Element)grid.getView().getRow(this.clickedRow));
row.setHeight( "30px" );
//expander.collapseRow( this.rowIndex );

However, because I also want to adjust the sizes (here only height) of the input fields, changing the css classes in the right way is becoming tedious. Adjusting the size of the input fields means cut off input fields at the top and/or the bottom. With some work, this can be mainly fixed for Firefox, but not IE - still cut off input fields at the top. I tried to do this in my css, but it had still no effect on IE.

.x-row-editor-header {
margin-top: 6px;

Even worse, that is not really what I want to see. If I look at the page in Firefox the top position of the input field does not match with the underlying associated text.
is there any other way to adjust the height of the input fields without any side effects?

29 Jun 2011, 1:56 AM
Can you provide the whole class you created?

29 Jun 2011, 3:03 AM
To change the height of the RowEditor, you should change the verifyLAyout function.

Basically you copy the verifyLayout function and change a bit. There you go.

protected class RowEditor2<M extends ModelData> extends RowEditor<M> {

protected void verifyLayout(boolean force) {

// initialize can not be reached... but we use instead "btns !=null"
if (btns != null && (isVisible() || force)) {
Element row = (Element) grid.getView().getRow(rowIndex);

setSize(El.fly(row).getWidth(false), renderButtons ? 100 : 0);


ColumnModel cm = grid.getColumnModel();
for (int i = 0, len = cm.getColumnCount(); i < len; i++) {
if (!cm.isHidden(i)) {
Field<?> f = (Field<?>) getItem(i);
f.getElement().setAttribute("gxt-dindex", "" + cm.getDataIndex(i));
MarginData md = (MarginData) ComponentHelper.getLayoutData(f);
f.setWidth(cm.getColumnWidth(i) - md.getMargins().left - md.getMargins().right);
} else {

The change is:

setSize(El.fly(row).getWidth(false), renderButtons ? 100 : 0);