[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).

public

class 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.