如何使用max-height和overflow-y自动滚动GWT SuggestBox：滚动？

Posted 2021-05-05

如何在SuggestBox上持有PopupPanel的最大高度设置自动滚动GWT SuggestBox？目前，当用户按下键盘向上键和向下键样式时，对建议项目进行更改并按Enter键将选择列表中当前选定的项目。

当项目位于低于最大高度时，滚动条不会滚动。我尝试扩展SuggestBox和内部类DefaultSuggestionDisplay来覆盖moveSelectionDown()和moveSelectionUp()以明确地调用popup.setScrollTop()。

为了做到这一点，我需要访问当前选择的MenuItem的绝对顶部因此需要访问SuggestionMenu，这也是一个私有的SuggestBox的内部类，并在没有getter的DefaultSuggestionDisplay中声明为私有成员。由于GWT是一个javascript，我们不能使用反射来访问它....有没有人有这个问题的解决方法？

谢谢。

答案

我一直在寻找并找不到合适的解决方案（除了重新实现SuggestBox）。以下内容避免重新实现SuggestBox：

private static class ScrollableDefaultSuggestionDisplay extends SuggestBox.DefaultSuggestionDisplay {

    private Widget suggestionMenu;

    @Override
    protected Widget decorateSuggestionList(Widget suggestionList) {
        suggestionMenu = suggestionList;

        return suggestionList;
    }

    @Override
    protected void moveSelectionDown() {
         super.moveSelectionDown();
         scrollSelectedItemIntoView();
    }

    @Override
    protected void moveSelectionUp() {
         super.moveSelectionUp();
         scrollSelectedItemIntoView();
    }

    private void scrollSelectedItemIntoView() {
        //                                     DIV          TABLE       TBODY       TR's
        NodeList<Node> trList = suggestionMenu.getElement().getChild(1).getChild(0).getChildNodes();
        for (int trIndex = 0; trIndex < trList.getLength(); ++trIndex) {
            Element trElement = (Element)trList.getItem(trIndex);
            if (((Element)trElement.getChild(0)).getClassName().contains("selected")) {
                trElement.scrollIntoView();

                break;
        }
    }
}

}

另一答案

关注Google群组上的this discussion，我实现了一个类似的解决方案，由于使用了JSNI，因此更加简洁：

private class ScrollableDefaultSuggestionDisplay extends DefaultSuggestionDisplay {

    @Override
    protected void moveSelectionDown() {
        super.moveSelectionDown();
        scrollSelectedItemIntoView();
    }

    @Override
    protected void moveSelectionUp() {
        super.moveSelectionUp();
        scrollSelectedItemIntoView();
    }

    private void scrollSelectedItemIntoView() {
        getSelectedMenuItem().getElement().scrollIntoView();
    }

    private native MenuItem getSelectedMenuItem() /*-{
        var menu = [e-mail]::suggestionMenu;
        return [e-mail]::selectedItem;
    }-*/;
}

另一答案

好的，我终于找到了解决方案。我必须根据GWT SuggestBox实现创建自己的建议框。但是按照下面的自定义实现： - 将ScrollPanel放到PopupPanel然后将MenuBar放到ScrollPanel -In MoveSelectionUp（）和新内部SuggestionDisplat实现的moveSelectionDown（）中添加以下代码：

 panel.ensureVisible( menu.getSelectedItem( ) );

这是通过扩展SuggestBox无法实现的，因为除非将受保护的getSelectionItem（）方法重写为公共方法，否则我们将无法访问所选的MenuItem。

最后添加CSS：

max-height: 250px;

到你的显示器实现中的popupPanel。