Come scorrere GWT SuggestBox con altezza massima e overflow-y: scorrere

Question

Come è possibile scorrere automaticamente il GWT SuggestBox con l'altezza massima impostata su PopupPanel con lo SuggestBox? Attualmente quando l'utente preme la tastiera su e giù per i tasti, gli stili cambiano sugli articoli suggeriti e premendo invio seleziona la voce attualmente selezionata sulla lista.

Quando l'elemento si trova in una posizione inferiore alle barre di scorrimento dell'altezza massima, non scorre. Ho provato ad estendere il SuggestBox e la classe interna DefaultSuggestionDisplay per ignorare moveSelectionDown() e moveSelectionUp() per chiamare esplicitamente popup.setScrollTop().

Per fare questo ho bisogno accesso alla parte superiore assoluto del momento selezionato MenuItem pertanto necessario accedere al SuggestionMenu che è anche una classe interna di SuggestBox che è privato e dichiarato come membro privato all'interno DefaultSuggestionDisplay colpo getter. Poiché GWT è un JavaScript, non possiamo usare la reflection per accedervi ... Qualcuno ha una soluzione alternativa per questo problema?

Grazie.

Answer 1

Ok, ho finalmente trovato la soluzione. Ho dovuto creare la mia casella di suggerimento basata sulle implementazioni di GWT SuggestBox. Ma che seguono relative a implementaion personalizzato: -Place ScrollPanel a PopupPanel poi posto MenuBar per ScrollPanel -In moveSelectionUp() e moveSelectionDown() della vostra nuova implementazione SuggestionDisplat interno aggiungere il codice qui sotto:

panel.ensureVisible(menu.getSelectedItem()); 

Questo non è realizzabile estendendo il SuggestBox poiché non avremo accesso al menu selezionato a meno che non si sostituisca il metodo protetto getSelectionItem() come metodo pubblico.

Infine aggiungere CSS:

max-height: 250px; 

Per il popupPanel nelle implementazioni di visualizzazione.

Answer 2

Sono stato alla ricerca in giro e non sono riuscito a trovare una soluzione adeguata (oltre a reimplementare SuggestBox). I seguenti SuggestBox reimplementare evita:

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

seguito this discussion sui gruppi di Google, ho implementato una soluzione simile, che è un po 'più conciso a causa dell'uso di 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; 
    }-*/; 
}