PDA

View Full Version : [1.2.3] EditorGrid Bug with LayoutContainer



crazycatlady
18 Mar 2009, 10:48 AM
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
18 Mar 2009, 11:06 AM
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
20 Mar 2009, 4:57 AM
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
20 Mar 2009, 5:01 AM
I am still unable to reproduce this. Please explain in detail what is wrong and how to trigger it.

crazycatlady
20 Mar 2009, 6:18 AM
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.