[1.2.3] EditorGrid Bug with LayoutContainer

[crazycatlady]

The problem I am having is that when I added several large widgets to the LayoutContainer the ComboEditors in the EditorGrid stopped working. Below is a test case where I just added several DualListFields, but I have reproduced the issue with ComboBoxes as well. The editable grid is copied directly from the example on the Gxt site.




public class TestPanel extends LayoutContainer {



public TestPanel() {
LayoutContainer form1 = new LayoutContainer();
FormLayout fl = new FormLayout();
form1.setLayout(fl);
fl.setLabelAlign(LabelAlign.TOP);
fl.setDefaultWidth(400);

form1.add(new DualListField<Plant>());
form1.add(new DualListField<Plant>());
form1.add(new DualListField<Plant>());
form1.add(new DualListField<Plant>());
form1.add(new DualListField<Plant>());
form1.add(new DualListField<Plant>());
form1.add(new DualListField<Plant>());
form1.add(new DualListField<Plant>());
form1.add(new DualListField<Plant>());
form1.add(new DualListField<Plant>());
form1.add(new DualListField<Plant>());

TimeField testTime = new TimeField();
testTime.setFieldLabel("Test Time");

form1.add(testTime);


LayoutContainer gridContainer = new LayoutContainer();
gridContainer.setLayout(new FlowLayout(5));

List<Stock> stocks = TestData.getStocks();
for (Stock s : stocks) {
DateWrapper w = new DateWrapper();
w = w.clearTime();
w = w.addDays((int) (Math.random() * 1000));
s.set("date", w.asDate());
}

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.setTriggerAction(TriggerAction.ALL);
combo.add("Shade");
combo.add("Mostly Shady");
combo.add("Sun or Shade");
combo.add("Mostly Sunny");
combo.add("Sunny");

CellEditor editor = new CellEditor(combo) {
public Object preProcessValue(Object value) {
if (value == null) {
return value;
}
return combo.findModel(value.toString());
}

public Object postProcessValue(Object value) {
if (value == null) {
return 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();
dateField.getPropertyEditor().setFormat(DateTimeFormat.getFormat("MM/dd/y"));

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 ListStore<Plant> store = new ListStore<Plant>();
store.add(TestData.getPlants());

ColumnModel cm = new ColumnModel(configs);

ContentPanel cp = new ContentPanel();
cp.setHeading("Edit Plants");
cp.setFrame(true);
cp.setSize(600, 300);
cp.setLayout(new FitLayout());

final EditorGrid<Plant> grid = new EditorGrid<Plant>(store, cm);
grid.setAutoExpandColumn("name");
grid.setBorders(true);
grid.addPlugin(checkColumn);
cp.add(grid);

ToolBar toolBar = new ToolBar();
TextToolItem add = new TextToolItem("Add Plant");
add.addSelectionListener(new SelectionListener<ToolBarEvent>() {

public void componentSelected(ToolBarEvent ce) {
Plant plant = new Plant();
plant.setName("New Plant 1");
plant.setLight("Mostly Shady");
plant.setPrice(0);
plant.setAvailable(new DateWrapper().clearTime().asDate());
plant.setIndoor(false);

grid.stopEditing();
store.insert(plant, 0);
grid.startEditing(0, 0);

}

});
toolBar.add(add);
cp.setTopComponent(toolBar);
cp.setButtonAlign(HorizontalAlignment.CENTER);
cp.addButton(new Button("Reset", new SelectionListener<ButtonEvent>() {

public void componentSelected(ButtonEvent ce) {
store.rejectChanges();
}
}));

cp.addButton(new Button("Save", new SelectionListener<ButtonEvent>() {

public void componentSelected(ButtonEvent ce) {
store.commitChanges();
}
}));

gridContainer.add(cp);
add(form1);
add(gridContainer);
}



}

[sven]

I did a small testcase and it works fine. Please read the forum guidelines. Your post is missing some major informations. Also your testcase code is not according the guidelines.

[crazycatlady]

Here is the test case where I am directly implementing the EntryPoint. The Stock, Plant, TestData classes are from the GXT resources and haven't been modified. I tried this in hosted mode and I compile it to the browser (Internet Explorer).


publicclass Playground implements EntryPoint {

/**

*Thisistheentrypointmethod.

*/

publicvoid onModuleLoad() {
LayoutContainer form1 = new LayoutContainer();
FormLayout fl = new FormLayout();
form1.setLayout(fl);
fl.setLabelAlign(LabelAlign.TOP);
fl.setDefaultWidth(400);

form1.add(new DualListField<Plant>());
form1.add(new DualListField<Plant>());
form1.add(new DualListField<Plant>());
form1.add(new DualListField<Plant>());
form1.add(new DualListField<Plant>());
form1.add(new DualListField<Plant>());
form1.add(new DualListField<Plant>());
form1.add(new DualListField<Plant>());
form1.add(new DualListField<Plant>());
form1.add(new DualListField<Plant>());
form1.add(new DualListField<Plant>());

TimeField testTime = new TimeField();
testTime.setFieldLabel("Test Time");

form1.add(testTime);

LayoutContainer gridContainer = new LayoutContainer();
gridContainer.setLayout(new FlowLayout(5));

List<Stock> stocks = TestData.getStocks();
for (Stock s : stocks) {
DateWrapper w = new DateWrapper();
w = w.clearTime();
w = w.addDays((int) (Math.random() * 1000));
s.set("date", w.asDate());
}

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.setTriggerAction(TriggerAction.ALL);
combo.add("Shade");
combo.add("Mostly Shady");
combo.add("Sun or Shade");
combo.add("Mostly Sunny");
combo.add("Sunny");

CellEditor editor = new CellEditor(combo) {
public Object preProcessValue(Object value) {
if (value == null) {
return value;
}
return combo.findModel(value.toString());
}

public Object postProcessValue(Object value) {
if (value == null) {
return 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();
dateField.getPropertyEditor().setFormat(DateTimeFormat.getFormat("MM/dd/y"));

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 ListStore<Plant> store = new ListStore<Plant>();
store.add(TestData.getPlants());

ColumnModel cm = new ColumnModel(configs);

ContentPanel cp = new ContentPanel();
cp.setHeading("Edit Plants");
cp.setFrame(true);
cp.setSize(600, 300);
cp.setLayout(new FitLayout());

final EditorGrid<Plant> grid = new EditorGrid<Plant>(store, cm);
grid.setAutoExpandColumn("name");
grid.setBorders(true);
grid.addPlugin(checkColumn);
cp.add(grid);

ToolBar toolBar = new ToolBar();
TextToolItem add = new TextToolItem("Add Plant");
add.addSelectionListener(new SelectionListener<ToolBarEvent>() {

publicvoid componentSelected(ToolBarEvent ce) {
Plant plant = new Plant();
plant.setName("New Plant 1");
plant.setLight("Mostly Shady");
plant.setPrice(0);
plant.setAvailable(new DateWrapper().clearTime().asDate());
plant.setIndoor(false);

grid.stopEditing();
store.insert(plant, 0);
grid.startEditing(0, 0);

}

});
toolBar.add(add);
cp.setTopComponent(toolBar);
cp.setButtonAlign(HorizontalAlignment.CENTER);
cp.addButton(new Button("Reset", new SelectionListener<ButtonEvent>() {

publicvoid componentSelected(ButtonEvent ce) {
store.rejectChanges();
}
}));

cp.addButton(new Button("Save", new SelectionListener<ButtonEvent>() {

publicvoid componentSelected(ButtonEvent ce) {
store.commitChanges();
}
}));

gridContainer.add(cp);
RootPanel.get("playground").add(form1);
RootPanel.get("playground").add(gridContainer);

}
}

[sven]

I am still unable to reproduce this. Please explain in detail what is wrong and how to trigger it.

[crazycatlady]

I made a new project with version 1.2.3 GXT and tested this just to make sure I didnt have any old css or js files. When I click on the comboboxes in the editor grid they turn blue and they don't drop-down the values. When I remove all of the DualListFields and compile again and view it in hosted mode the comboboxes work again.