Cách tự động cuộn Gợi ý GWT với chiều cao tối đa và tràn-y: cuộn

Question

Làm cách nào để tự động cuộn GWT SuggestBox với chiều cao tối đa được đặt trên PopupPanel giữ SuggestBox? Hiện tại khi người dùng nhấn phím lên các phím và xuống các kiểu thay đổi phím trên các mục được đề xuất và nhấn enter sẽ chọn mục hiện được chọn trong danh sách.

Khi mục nằm ở vị trí thấp hơn thanh cuộn cao nhất không cuộn. Tôi đã thử mở rộng SuggestBox và lớp bên trong DefaultSuggestionDisplay để ghi đè moveSelectionDown() và moveSelectionUp() để gọi rõ ràng popup.setScrollTop(). Để làm được điều này, tôi cần quyền truy cập vào đầu tuyệt đối của MenuItem do đó cần truy cập vào SuggestionMenu cũng là lớp bên trong của SuggestBox, riêng tư và được khai báo là thành viên riêng trong phạm vi DefaultSuggestionDisplay mà không cần getter. Vì GWT là một JavaScript nên chúng tôi không thể sử dụng sự phản chiếu để truy cập nó .... Có ai có giải pháp cho vấn đề này không?

Cảm ơn.

Answer 1

Ok, cuối cùng tôi đã tìm ra giải pháp. Tôi đã phải tạo hộp đề xuất của riêng mình dựa trên việc triển khai GWT SuggestBox. Nhưng làm theo dưới đây trong implementaion tùy chỉnh: -Place ScrollPanel để PopupPanel sau đó đặt thanh menu để ScrollPanel -Trong moveSelectionUp() và moveSelectionDown() thực hiện SuggestionDisplat nội bộ mới của bạn thêm đoạn mã dưới đây:

panel.ensureVisible(menu.getSelectedItem()); 

Đây không phải là có thể đạt được bằng cách mở rộng SuggestBox vì chúng tôi sẽ không có quyền truy cập vào lựa chọn MenuItem trừ khi được bảo vệ phương thức getSelectionItem() làm phương thức công khai.

Cuối cùng thêm CSS:

max-height: 250px; 

Đối với popupPanel trong việc triển khai hiển thị của bạn.

Answer 2

Tôi đã tìm kiếm xung quanh và không thể tìm thấy giải pháp thích hợp (ngoài việc thực hiện lại SuggestBox). Các tránh sau 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

Sau this discussion vào nhóm Google, tôi thực hiện một giải pháp tương tự đó là ngắn gọn hơn một chút do việc sử dụng các 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; 
    }-*/; 
}