GXT 工具栏滚动

Question

我正在开发一个简单的 GXT 小部件 - 它是一个使用 setTopComponent 添加了工具栏的 TreePanel。问题是，一旦树足够大以至于可以滚动，滚动条就不会只滚动树，还会滚动 ToolBar。

应该更改什么以使工具栏保留在页面顶部，并且只有树滚动。

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

问题是

TreePanelExample extends LayoutContainer

而它应该扩展 Viewport。

此外我不应该使用

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

此外还需要使用

添加主面板

new BorderLayoutData(LayoutRegion.CENTER);

完整的解决方案如下：

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

GXT 工具栏滚动

GXT ToolBar is scrolled

gwt

scrollbar

toolbar

gxt

treepanel