Jak automatycznie przewijać GWT SuggestBox z maksymalną wysokością i przepełnieniem-y: przewijać

Question

Jak mogę automatycznie przewinąć GWT SuggestBox z ustawieniem maks. Wysokości na PopupPanel trzymając SuggestBox? Obecnie, gdy użytkownik naciśnie klawisze klawisza w górę i klawisze w dół, zmienia style na sugerowanych elementach, a naciśnięcie klawisza enter spowoduje wybranie aktualnie wybranego elementu z listy.

Gdy przedmiot znajduje się poniżej pasków przewijania maks., Nie przewija się. Próbowałem rozszerzyć SuggestBox i wewnętrzną klasę DefaultSuggestionDisplay, aby zastąpić moveSelectionDown() i moveSelectionUp(), aby jawnie wywołać popup.setScrollTop().

W tym celu muszę dostęp do absolutnego szczytu aktualnie wybranego MenuItem zatem potrzebuje dostępu do SuggestionMenu który jest również wewnętrzna klasa SuggestBox które są prywatne i zadeklarowane jako prywatny członka w DefaultSuggestionDisplay bez getter. Ponieważ GWT jest JavaScriptem, nie możemy użyć odbicia, aby uzyskać do niego dostęp ... Czy ktoś ma obejście tego problemu?

Dzięki.

Answer 1

OK, w końcu znalazłem rozwiązanie. Musiałem stworzyć własne pole sugestii oparte na implementacjach GWT SuggestBox. Ale śledzić poniżej w niestandardowym implementaion: -Miejsce ScrollPanel do PopupPanel następnie umieścić pasek menu do ScrollPanel -W moveSelectionUp() i() moveSelectionDown swojego nowego wdrożenia wewnętrznego SuggestionDisplat dodać poniższy kod:

panel.ensureVisible(menu.getSelectedItem()); 

To nie jest osiągalny przez rozszerzenie SuggestBox, ponieważ nie będziemy mieć dostępu do wybranej pozycji menuItem , chyba że nadpisujemy zabezpieczoną metodę getSelectionItem() jako metodę publiczną.

koniec dodać CSS:

max-height: 250px; 

Do tej popupPanel w swoich implementacjach wyświetlania.

Answer 2

Szukałem w pobliżu i nie mogłem znaleźć odpowiedniego rozwiązania (oprócz ponownego zaimplementowania SuggestBox). Poniższe unika reimplementing 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; 
     } 
    } 
} 

}

Answer 3

Obserwuje this discussion o grupach Google I wdrożone podobne rozwiązanie, które jest nieco bardziej zwięzłe dzięki wykorzystaniu 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 = this.@com.google.gwt.user.client.ui.SuggestBox.DefaultSuggestionDisplay::suggestionMenu; 
     return menu.@com.google.gwt.user.client.ui.MenuBar::selectedItem; 
    }-*/; 
}