PDA

View Full Version : [FIXED] ColumnLayout weird behavior



thatone
5 Mar 2009, 11:39 AM
I noticed a weird behavior in ColumnLayout calculation in GXT 1.2.3.

Let's say I have the following arrangements:

1) LayoutContainer using ColumnLayout with 2 Columns
2) The LayoutContainer width in #1 is wider than the screen/browser width

The ColumnLayout would show the rightmost column in the bottom of the leftmost column under these circumstances:

1) Screen/Browser width < LayoutContainer width
2) onRender() is being called the first time

sven
5 Mar 2009, 11:50 AM
onRender is always only called once. Please post a testcase demonstrating the issue.

thatone
5 Mar 2009, 5:38 PM
Here's the code. Things to note:
1) You need to make it bigger first
2) ... then make it smaller
3) keep trying until the second grid goes to the bottom (wrap around)

I know step #3 is like hit and miss, nonetheless, ColumnLayout shouldn't wrap-around in any situation.



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.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.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.extjs.gxt.ui.client.widget.layout.ColumnData;
import com.extjs.gxt.ui.client.widget.layout.ColumnLayout;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.i18n.client.NumberFormat;

public class ColumnLayoutBugs extends LayoutContainer {

public ColumnLayoutBugs() {
this.setLayout(new ColumnLayout());
this.add(createGrid(), new ColumnData(0.5));
this.add(createGrid(), new ColumnData(0.5));
}

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<ModelData> store = new ListStore<ModelData>();
// store.add(TestData.getPlants());
// store.groupBy("light");
final ContentPanel container = new ContentPanel();

final EditorGrid<ModelData> grid = new EditorGrid<ModelData>(store, cm);
grid.setAutoHeight(true);
grid.setAutoWidth(true);
grid.addPlugin(checkColumn);
container.setHeaderVisible(false);
container.setSize(500, 600);
container.add(grid);
// container.setTopComponent(show);
container.layout();
container.setMonitorWindowResize(true);
return container;
}

}

thatone
5 Mar 2009, 5:43 PM
Picture 2: initial state
Picture 3: make it bigger
Picture 4: make it smaller

sven
5 Mar 2009, 6:04 PM
Columnlayout isnt monitoring for resizes. So it was quite easy to reproduce. Fix will be in SVN soon.

sven
1 Apr 2009, 4:18 AM
Fixed in SVN.