Question

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

enter image description here

应该更改什么，以便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

而它应该扩展视口。

另外我不应该使用

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工具栏

1 个答案: