I have used Orientation.HORIZONTAL only. In this case I have set the height and width with the following code:
Code:
@Override
protected void onResize(int width, int height) {
super.onResize(width, height);
if (orientation == Orientation.HORIZONTAL) {
int w = (width - buttonAdapter.el().getParent().getWidth()) / 2;
w -= (fields.size() * spacing);
fromAdapter.setSize(w, height);
toAdapter.setSize(w, height);
int h = Math.max(fromLabel.getHeight(), toLabel.getHeight());
fromField.setSize(w, height - h);
toField.setSize(w, height - h);
}
}
buttonAdapter is defined within the constructor as
Code:
buttonAdapter = new AdapterField(buttonBar);
buttonAdapter.setData("layoutData", new TableData(HorizontalAlignment.CENTER, VerticalAlignment.MIDDLE));
I think there were also some modifications on the parent panel. The panel is a FormPanel, which doesn't display a label. But the panel moves the child elements a little bit to the right and bottom.
So I have added two rules in the CSS
Code:
/*
* this is for FormPanels, which contain a DualListField (as MultiField) without a label,
* GXT doesn't display the label but there is a padding below or behind the label, which moves
* the MultiField content some pixel to the bottom or right
*/
.no-padding-label .x-form-label-top .x-form-item.x-hide-label .x-form-element {
padding-top: 0px;
}
/*
* this is for FormPanels, which should not have automatic space between the fields
*/
.no-margin-bottom .x-form-item {
margin-bottom: 0px;
}
In the constructor of the panel I have used the rules:
Code:
private static final int LABEL_WIDTH = 120;
public TrialConcurrentEditPanel() {
LOGGER.fine("Creating TrialConcurrentEditPanel...");
addStyleName("no-margin-bottom");
addStyleName("no-padding-label");
// disable default field width
setFieldWidth(-1);
setLabelWidth(LABEL_WIDTH);
setLabelAlign(LabelAlign.TOP);
add(getConcurrentDualList());
addListener(Events.Resize, getResizeListener());
}
private Listener getResizeListener() {
return new Listener() {
@Override
public void handleEvent(BoxComponentEvent be) {
int height = be.getHeight() - (2 * TrialConcurrentEditPanel.this.getPadding());
int width = be.getWidth() - (2 * TrialConcurrentEditPanel.this.getPadding()); getConcurrentDualList().setSize(width, height);
}
};
}
The ResizeListener calculates the current panel size without padding, to get the exact space for the DualField. Hope it helps! André