I have created a subclass, which calls fields.clear() inside the constructor. So I can add new widgets to the underlying MultiField. In my application I need a horizontal dual list field, so I have added every ListField to a new VerticalPanel, which have also a LabelField on top. Every VerticalPanel is wrapped by an AdapterField, so I can add one Adapterfield for the from-list, one for the buttonbar and one for the to-list again.

To calculate the height of the DualListField I have added a Resize listener, which calculates the height of the AdapterFields depending on the parent Panel or Window. To calculate the list-field height substract the maximum height of the from/to label.

The buttonbar is always displayed on top of the MultiField, but you can add some data with buttonAdapter.setData("layoutData", new TableData()) to move the buttons to the middle of the ListFields. The onRender() method of MultiField will use these data.

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;
}