PDA

View Full Version : CheckboxGroup in a RowEditor



dagmar
11 Feb 2010, 2:16 AM
I have added a CheckBoxGroup in my RowEditor, and it works great in Hosted Mode (using GXT 2.1.1 and GWT 1.7), but in Firefox (3.5.7), the alignment of the boxes and the labels has gone off. In Internet explorer it is ok. Is this a bug or am I doing something wrong?



final CheckBoxGroup checkGroup = new CheckBoxGroup();
CheckBox check1 = new CheckBox();
check1.setBoxLabel("option1");
checkGroup.add(check1);
CheckBox check2 = new CheckBox();
check2.setBoxLabel("option2");
checkGroup.add(check2);
CellEditor multiListEditor = new CellEditor(checkGroup) {
@Override
public Object preProcessValue(Object value) {
if (value != null) {
for (Field<?> checkBox : checkGroup.getAll()) {
if (checkBox instanceof CheckBox) {
if ( ((String)value).contains(checkBox.getId()) ) {
((CheckBox) checkBox).setValue(true);
} else {
((CheckBox) checkBox).setValue(false);
}
}
}
return checkGroup.getValue();
}
return super.preProcessValue(value);
}
@Override
public Object postProcessValue(Object value) {
StringBuilder sb = new StringBuilder();
List<CheckBox> selection = checkGroup.getValues();
if (selection != null) {
for (CheckBox s : selection) {
sb.append(s.getId());
sb.append(" ");
}
}
return sb.toString().trim();
}
};
colConfig.setEditor(multiListEditor);

dagmar
11 Feb 2010, 3:39 AM
Added an attachment with a screenshot of the problem.

dagmar
11 Feb 2010, 5:03 AM
Should I make a ticket in the bug forum?



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

import com.extjs.gxt.ui.client.Style.Orientation;
import com.extjs.gxt.ui.client.data.BaseModelData;
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.form.CheckBox;
import com.extjs.gxt.ui.client.widget.form.CheckBoxGroup;
import com.extjs.gxt.ui.client.widget.form.DateField;
import com.extjs.gxt.ui.client.widget.form.Field;
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.form.ComboBox.TriggerAction;
import com.extjs.gxt.ui.client.widget.grid.CellEditor;
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.Grid;
import com.extjs.gxt.ui.client.widget.grid.RowEditor;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.i18n.client.NumberFormat;
import com.google.gwt.user.client.ui.RootPanel;

public class MySample implements EntryPoint {

public void onModuleLoad() {
ContentPanel cp = new ContentPanel(new FitLayout());
cp.setHeading("Grid RowEditor CheckboxGroup + Non editable Date bugs");
cp.setSize(600, 400);

List<ColumnConfig> configs = new ArrayList<ColumnConfig>();

// BUG #1: date column which isn't editable - see how the format is ignored by the row editor
ColumnConfig date = new ColumnConfig("date", "date", 125);
date.setDateTimeFormat(DateTimeFormat.getFormat("d MMM y HH:mm:ss"));
configs.add(date);

ColumnConfig colConfig1 = new ColumnConfig("patientid", "patientid", 150);
TextField<String> text1 = new TextField<String>();
colConfig1.setEditor(new CellEditor(text1));
configs.add(colConfig1);

ColumnConfig colConfig2 = new ColumnConfig("title", "title", 150);
TextField<String> text2 = new TextField<String>();
colConfig2.setEditor(new CellEditor(text2));
configs.add(colConfig2);

ColumnConfig colConfig3 = new ColumnConfig("firstname", "firstname", 150);
TextField<String> text3 = new TextField<String>();
colConfig3.setEditor(new CellEditor(text3));
configs.add(colConfig3);

ColumnConfig colConfig4 = new ColumnConfig("lastname", "lastname", 150);
TextField<String> text4 = new TextField<String>();
colConfig4.setEditor(new CellEditor(text4));
configs.add(colConfig4);

ColumnConfig colConfig5 = new ColumnConfig("sex", "sex", 150);
colConfig5.setEditor(new ComboBoxCellEditor(new SimpleComboBox<String>(), "male", "female"));
configs.add(colConfig5);

ColumnConfig colConfig6 = new ColumnConfig("birthdate", "birthdate", 150);
DateField d = new DateField();
d.getPropertyEditor().setFormat(DateTimeFormat.getFormat("MM/dd/yyyy"));
colConfig6.setEditor(new CellEditor(d));
colConfig6.setDateTimeFormat(DateTimeFormat.getMediumDateFormat());

ColumnConfig colConfig7 = new ColumnConfig("weight", "weight", 150);
NumberField number = new NumberField();
number.setPropertyEditorType(Integer.class);
colConfig7.setEditor(new CellEditor(number));

ColumnConfig colConfig8 = new ColumnConfig("height", "height", 150);
NumberField dec = new NumberField();
dec.getPropertyEditor().setFormat(NumberFormat.getDecimalFormat());
colConfig8.setEditor(new CellEditor(dec));
colConfig8.setNumberFormat(NumberFormat.getDecimalFormat());

ColumnConfig colConfig9 = new ColumnConfig("pregnant", "pregnant", 150);
colConfig9.setEditor(new ComboBoxCellEditor(new SimpleComboBox<String>(), "true", "false"));
configs.add(colConfig9);

// Bug #2: In Firefox the checkbox box-label alignment is wrong
ColumnConfig colConfig10 = new ColumnConfig("arvs", "arvs", 150);
colConfig10.setEditor(new CheckBoxGroupCellEditor(new CheckBoxGroup(), "azt", "abicavir", "efivarence", "triomune", "truvada"));
configs.add(colConfig10);

ColumnConfig colConfig11 = new ColumnConfig("city", "city", 150);
colConfig11.setEditor(new ComboBoxCellEditor(new SimpleComboBox<String>(), "cape town", "johannesburg", "durban"));
configs.add(colConfig11);

ColumnModel cm = new ColumnModel(configs);
Grid<ModelData> grid = new Grid<ModelData>(getStore(), cm);

final RowEditor<ModelData> re = new RowEditor<ModelData>();
re.setAutoHeight(true);
grid.addPlugin(re);

cp.add(grid);
RootPanel.get().add(cp);
}

private ListStore<ModelData> getStore() {
ListStore<ModelData> store = new ListStore<ModelData>();
for (int i = 0; i < 15; i++) {
BaseModelData m = new BaseModelData();
m.set("date", new Date());
m.set("patientid", "123");
m.set("title", "mrs");
m.set("firstname", "dagmar");
m.set("lastname", "example");
m.set("sex", "female");
m.set("birthdate", new Date());
m.set("weight", 60);
m.set("height", 1.73);
m.set("pregant", "true");
m.set("arvs", "azt triomune");
m.set("city", "cape town");
store.add(m);
}
return store;
}
}

class ComboBoxCellEditor extends CellEditor {
SimpleComboBox<String> combo;

ComboBoxCellEditor(SimpleComboBox<String> field, String... simpleValues) {
super(field);
combo = field;
combo.setForceSelection(true);
combo.setTriggerAction(TriggerAction.ALL);
for (String simpleValue : simpleValues) {
combo.add(simpleValue);
}
}

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

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

class CheckBoxGroupCellEditor extends CellEditor {

CheckBoxGroup checkGroup;

CheckBoxGroupCellEditor(CheckBoxGroup field, String... simpleValues) {
super(field);
checkGroup = (CheckBoxGroup) field;
checkGroup.setInEditor(true);
checkGroup.setResizeFields(true);
checkGroup.setOrientation(Orientation.VERTICAL);
for (String simpleValue : simpleValues) {
CheckBox check = new CheckBox();
check.setBoxLabel(simpleValue);
check.setId(simpleValue);
checkGroup.add(check);
}
}

@Override
public Object preProcessValue(Object value) {
if (value != null) {
for (Field<?> checkBox : checkGroup.getAll()) {
if (checkBox instanceof CheckBox) {
if ( ((String)value).contains(checkBox.getId()) ) {
((CheckBox) checkBox).setValue(true);
} else {
((CheckBox) checkBox).setValue(false);
}
}
}
return checkGroup.getValue();
} else {
checkGroup.clear();
for (Field<?> checkBox : checkGroup.getAll()) {
if (checkBox instanceof CheckBox) {
((CheckBox) checkBox).setValue(false);
}
}
}
return super.preProcessValue(value);
}

@Override
public Object postProcessValue(Object value) {
StringBuilder sb = new StringBuilder();
List<CheckBox> selection = checkGroup.getValues();
if (selection != null) {
for (CheckBox s : selection) {
sb.append(s.getId());
sb.append(" ");
}
}
return sb.toString().trim();
}
}