GXT ToolBar is scrolled

Question

I'm developing a simple GXT widget - it's a TreePanel with a ToolBar added using setTopComponent. The problem is that as soon as the tree is large enough so that it can be scrolled, the scroll-bar doesn't scroll the tree only, but scrolls the ToolBar as well.

What should be change so that ToolBar remains on the top of page, and only the tree is scrolled.

public class TreePanelExample extends LayoutContainer {

    @Override
    protected void onRender(Element parent, int index) {
        super.onRender(parent, index);

        Folder model = getTreeModel();

        TreeStore<ModelData> store = new TreeStore<ModelData>();
        store.add(model.getChildren(), true);

        final TreePanel<ModelData> tree = new TreePanel<ModelData>(store);
        tree.setDisplayProperty("name");
        tree.setAutoLoad(true);

        ToolBar toolBar = new ToolBar();
        toolBar.setBorders(true);

        toolBar.add(new Button("Dummy button", new SelectionListener<ButtonEvent>() {
            public void componentSelected(ButtonEvent ce) {
                Info.display("Dummy button", "I'm so dumb!");
            }
        }));

        ContentPanel panel = new ContentPanel();
        panel.setHeaderVisible(false);
        panel.setCollapsible(false);
        panel.setFrame(false);
        panel.setAutoWidth(true);
        panel.setAutoHeight(true);
        // setting fixed size doesn't make any difference
        // panel.setHeight(100);
        panel.setTopComponent(toolBar);
        panel.add(tree);

        add(panel);
    }

Answer 1

The problem is that

TreePanelExample extends LayoutContainer

while instead it should extend Viewport.

Additionally I shouldn't have used

panel.setAutoWidth(true);
panel.setAutoHeight(true);

Plus it is necessary to add the main panel using

new BorderLayoutData(LayoutRegion.CENTER);

Here is the complete solution:

public class TreePanelExample extends Viewport {

public TreePanelExample() {
    super();
    setLayout(new BorderLayout());

    Folder model = getTreeModel();

    TreeStore<ModelData> store = new TreeStore<ModelData>();
    store.add(model.getChildren(), true);

    final TreePanel<ModelData> treePanel = new TreePanel<ModelData>(store);
    treePanel.setDisplayProperty("name");
    treePanel.setAutoLoad(true);

    ToolBar toolBar = new ToolBar();
    toolBar.setBorders(true);

    toolBar.add(new Button("Dummy button", new SelectionListener<ButtonEvent>() {
        public void componentSelected(ButtonEvent ce) {
            Info.display("Dummy button", "I'm so dumb!");
        }
    }));

    ContentPanel panel = new ContentPanel();
    panel.setBodyBorder(false);
    panel.setHeaderVisible(false);

    panel.setTopComponent(toolBar);
    panel.setLayout(new FitLayout());
    panel.add(treePanel);

    BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
    centerData.setMargins(new Margins(5, 5, 5, 5));
    centerData.setCollapsible(true);
    panel.syncSize();

    add(panel, centerData);
}