Form layout problem

[appamail@hotmail.com]

I got a very strange problem.

The layout looks normal when first time open the page, but if I click any field of it, the fields of the form will move and the layout is disorder. It seems very difficult to layout a form with GXT.

Here is my related code:


private void createQueryForm(int width) {
form = new FormPanel();
form.setBorders(false);
form.setFrame(false);
form.setHeaderVisible(false);
form.setBodyBorder(false);
form.setWidth(width);

dateAndTimeFieldSet = new FieldSet();
dateAndTimeFieldSet.setHeading("Date & Time");

FormLayout dateAndTimeFieldSetLayout = new FormLayout();
dateAndTimeFieldSetLayout.setLabelWidth(100);
dateAndTimeFieldSet.setLayout(dateAndTimeFieldSetLayout);

isMutiDateQueryBox = new CheckBox();
isMutiDateQueryBox.setFieldLabel("Muti-Day Query");
isMutiDateQueryBox.setShim(true);
isMutiDateQueryBox.addListener(Events.Change, new Listener<FieldEvent>() {
public void handleEvent(FieldEvent event) {
if (isMutiDateQueryBox.getValue()) {
setMutiDateQueryForm();
} else {
setSingleDateQueryForm();
}
}
});

dateAndTimeFieldSet.add(isMutiDateQueryBox, formData);

startDate = new DateField();
startDate.setFieldLabel("Start Date (*)");
startDate.setAllowBlank(false);
startDate.setVisible(false);
startDate.getPropertyEditor().setFormat(dateFormat);
dateAndTimeFieldSet.add(startDate, formData);

searchDate = new DateField();
searchDate.setFieldLabel("Search Date (*)");
searchDate.setAllowBlank(false);
searchDate.getPropertyEditor().setFormat(dateFormat);
dateAndTimeFieldSet.add(searchDate, formData);

startTime = new TextField<String>();
startTime.setFieldLabel("Start Time");
startTime.setRegex("(([01]\\d)|(2[0-3])):[0-5]\\d(:[0-5]\\d)?");
startTime.getMessages().setRegexText("Time format should be HH:mm:ss!");
dateAndTimeFieldSet.add(startTime, formData);

endDate = new DateField();
endDate.setFieldLabel("End Date (*)");
endDate.setAllowBlank(false);
endDate.setVisible(false);
endDate.getPropertyEditor().setFormat(dateFormat);
dateAndTimeFieldSet.add(endDate, formData);

endTime = new TextField<String>();
endTime.setFieldLabel("End Time");
endTime.setRegex("(([01]\\d)|(2[0-3])):[0-5]\\d(:[0-5]\\d)?");
endTime.getMessages().setRegexText("Time format should be HH:mm:ss!");
dateAndTimeFieldSet.add(endTime, formData);
form.add(dateAndTimeFieldSet);

advanceConditionFieldSet = new FieldSet();
advanceConditionFieldSet.setHeading("Advance Conditions");
advanceConditionFieldSet.setLayout(new RowLayout());

LayoutContainer searchForContainer = new LayoutContainer();
searchForContainer.setStyleAttribute("paddingRight", "10px");
FormLayout searchForLayout = new FormLayout();
searchForLayout.setLabelWidth(60);
searchForContainer.setLayout(searchForLayout);

isAnd = new Radio();
isAnd.setBoxLabel("All");
isAnd.setValue(true);
isAnd.setWidth(80);
isAnd.setStyleAttribute("padding", "10px");

isOr = new Radio();
isOr.setBoxLabel("Any");
isOr.setWidth(80);
isOr.setStyleAttribute("padding", "10px");

radioGroup = new RadioGroup();
radioGroup.setFieldLabel("For");
radioGroup.add(isAnd);
radioGroup.add(isOr);

searchForContainer.add(radioGroup, formData);
//advanceConditionFieldSet.add(searchForContainer);


LayoutContainer conditionContainer = new LayoutContainer();
conditionContainer.setStyleAttribute("paddingRight", "10px");
FormLayout conditionContainerLayout = new FormLayout();
conditionContainerLayout.setLabelAlign(LabelAlign.TOP);
conditionContainerLayout.setLabelWidth(120);
conditionContainer.setLayout(conditionContainerLayout);

List<String> queryParaList = new ArrayList<String>();
queryParaList.add("FileName");
queryParaList.add("Index");
queryParaList.add("RecordType");
queryParaList.add("AnswerTime");
queryParaList.add("ReleaseTime");
queryParaList.add("CallDuration");
queryParaList.add("CallingNumber");
queryParaList.add("CalledNumber");
queryParaList.add("IMSI");
queryParaList.add("LAC");
queryParaList.add("Cell");
queryParaList.add("ChangeOfLoc");
queryParaList.add("IncTKG");
queryParaList.add("IncCIC");
queryParaList.add("OutTKG");
queryParaList.add("OutCIC");
queryParaList.add("CallRef");
queryParaList.add("TransNo");
queryParaList.add("RoamingNo");
queryParaList.add("ServedIMEI");
queryParaList.add("ServedMSISDN");
queryParaList.add("RecEntity");
queryParaList.add("BasicService");
queryParaList.add("SSCode");
queryParaList.add("Cause4Term");
queryParaList.add("0408Cause");
queryParaList.add("ChargeIndicator");
queryParaList.add("PartialRT");
queryParaList.add("SeqNo");
queryParaList.add("FreeFormatData");
queryParaList.add("ServiceKey");
queryParaList.add("NtkCallRefNum");
queryParaList.add("RateIndication");
queryParaList.add("MultiMediaCall");
queryParaList.add("NtkCallRefNum");

for (Iterator<String> it = queryParaList.iterator(); it.hasNext();) {
String fileName = it.next();
conditionContainer.add(new SingleCondition(fileName).getField(), formData);
}
advanceConditionFieldSet.add(conditionContainer);
form.add(advanceConditionFieldSet);

HorizontalPanel buttonPanel = new HorizontalPanel();
queryButton = new Button("Query");
buttonPanel.add(queryButton);
buttonPanel.setAutoHeight(true);
buttonPanel.setHorizontalAlign(HorizontalAlignment.RIGHT);

form.add(buttonPanel);
add(form);
}

And here is the SingleCondition.java,


public class SingleCondition {
private String fieldName;

private AdapterField field;

private HorizontalPanel conditionPanel;

private CheckBox isNot;

private SimpleComboBox<String> compare;

private TextField<String> content;

public SingleCondition(String fieldName) {
this.fieldName = fieldName;
this.conditionPanel = new HorizontalPanel();
this.conditionPanel.setAutoHeight(true);

CardLayout layout = new CardLayout();
this.conditionPanel.setLayout(layout);
initConditionPanel();
}

public AdapterField getField() {
return field;
}

private void initConditionPanel() {
isNot = new CheckBox();
isNot.setStyleAttribute("margin", "5px");
conditionPanel.add(isNot);

compare = new SimpleComboBox<String>();
compare.add("Contains");
compare.add("Equals");
compare.setEditable(false);
compare.setWidth(100);
compare.setStyleAttribute("margin", "5px");
conditionPanel.add(compare);

content = new TextField<String>();
content.setWidth(100);
content.setStyleAttribute("margin", "5px");
conditionPanel.add(content);

field = new AdapterField(conditionPanel);
field.setFieldLabel(fieldName);
}
}