[CLOSED] Grid.setAutoHeight(true) + scrolling = rows dissapear

[thatone]

Take a look at this code:

* Please ignore the TestData
* Please use your example Plant ModelData

Try this:
- Scroll using the browser => result is okay
- Put the mouse pointer IN the grid and scroll using scroll wheel (if possible) => rows visually are there but the models are no longer there




package com.thatone.gwt.example.layout;

import java.util.ArrayList;
import java.util.List;

import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.DateField;
import com.extjs.gxt.ui.client.widget.form.NumberField;
import com.extjs.gxt.ui.client.widget.form.SimpleComboBox;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.grid.CellEditor;
import com.extjs.gxt.ui.client.widget.grid.CheckColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.EditorGrid;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.i18n.client.NumberFormat;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.DockPanel;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.thatone.gwt.example.model.Plant;
import com.thatone.gwt.example.model.TestData;

public class GridSetAutoHeightBug extends Composite {

private VerticalPanel allPanel = new VerticalPanel();
private DockPanel mainPanel = new DockPanel();
private VerticalPanel bodyPanel = new VerticalPanel();
private SimplePanel navPanel = new SimplePanel();

public GridSetAutoHeightBug() {

bodyPanel.setWidth("300");
bodyPanel.add(createGrid());

mainPanel.setHeight("100%");
mainPanel.add(navPanel, DockPanel.WEST);
mainPanel.add(bodyPanel, DockPanel.CENTER);
mainPanel.setCellWidth(navPanel, "20%");
mainPanel.setCellWidth(bodyPanel, "70%");

allPanel.setWidth("100%");
allPanel.add(mainPanel);
initWidget(allPanel);
}

private LayoutContainer createGrid() {
List<ColumnConfig> configs = new ArrayList<ColumnConfig>();

ColumnConfig column = new ColumnConfig();
column.setId("name");
column.setHeader("Common Name");
column.setWidth(220);

TextField<String> text = new TextField<String>();
text.setAllowBlank(false);
text.setAutoValidate(true);
column.setEditor(new CellEditor(text));
configs.add(column);

final SimpleComboBox<String> combo = new SimpleComboBox<String>();
combo.add("Shade");
combo.add("Mostly Shady");
combo.add("Sun or Shade");
combo.add("Mostly Sunny");
combo.add("Sunny");

CellEditor editor = new CellEditor(combo) {

@Override
public Object preProcessValue(final Object value) {
return combo.findModel(value.toString());
}

@Override
public Object postProcessValue(final Object value) {
return ((ModelData) value).get("value");
}
};

column = new ColumnConfig();
column.setId("light");
column.setHeader("Light");
column.setWidth(130);
column.setEditor(editor);
configs.add(column);

column = new ColumnConfig();
column.setId("price");
column.setHeader("Price");
column.setAlignment(HorizontalAlignment.RIGHT);
column.setWidth(70);
column.setNumberFormat(NumberFormat.getCurrencyFormat());
column.setEditor(new CellEditor(new NumberField()));

configs.add(column);

DateField dateField = new DateField();

column = new ColumnConfig();
column.setId("available");
column.setHeader("Available");
column.setWidth(95);
column.setEditor(new CellEditor(dateField));
column.setDateTimeFormat(DateTimeFormat.getMediumDateFormat());
configs.add(column);

CheckColumnConfig checkColumn = new CheckColumnConfig("indoor", "Indoor?", 55);
configs.add(checkColumn);

final ColumnModel cm = new ColumnModel(configs);
final ListStore<Plant> store = new ListStore<Plant>();
// store.add(TestData.getPlants());
// store.groupBy("light");
final ContentPanel container = new ContentPanel();
Button show = new Button("show");
show.addSelectionListener(new SelectionListener<ComponentEvent>() {

@Override
public void componentSelected(final ComponentEvent ce) {
store.removeAll();
store.add(TestData.getPlants());
container.layout();
}
});

final EditorGrid<Plant> grid = new EditorGrid<Plant>(store, cm);
grid.setAutoHeight(true);
grid.setAutoWidth(true);
grid.addPlugin(checkColumn);
container.setHeaderVisible(false);
container.setWidth("100%");
container.add(grid);
container.setTopComponent(show);
container.layout();
container.setMonitorWindowResize(true);
return container;
}

}

[sven]

you should not use autoheight with grids. Size your grids.

[thatone]

you should not use autoheight with grids. Size your grids.

We would very much like to be able to use the grid in a context where it does not require an explicit height/width.
Was there a reason why it was not designed for autoHeight()? This seems to be quite a limitation.

What we would specifically like is a grid who's overall scroll area expands and contracts as rows are added/removed up to a maximum height at which point the vertical scrollbar begins to appear under the grid headers.

It's looking like we will have to extend/modify the grid to achieve this.

Does anyone have any ideas on how to achieve this? Current thinking is that we will need to manage the dynamic re-sizing of the grid on each update.

[sven]

Grid is a complex widget that need sizes. It handles scrolling on its own