如何使可滾動的gxt頁面

Question

我有一個應用程序，當它變得太大而無法滾動時，我需要該頁面。至於現在不是。舉例來說，我使用了下面這個：example。 這裏是代碼：

public class Rules extends ContentPanel{ 
    private final ServerManagementAsync serverManagementSvc = GWT.create(ServerManagement.class); 
    private EditorGrid<PropertyItem> grid; 
    private ListStore<PropertyItem> store; 
    private ContentPanel contentPanel; 

    protected void doAutoHeight() { 
     if (grid.isViewReady()) { 
      grid.getView().getScroller().setStyleAttribute("overflowY", "hidden"); 
      setHeight((grid.getView().getBody().isScrollableX() ? 19 : 0) + grid.el().getFrameWidth("tb") 
        + grid.getView().getHeader().getHeight() + getFrameHeight() 
        + grid.getView().getBody().firstChild().getHeight()); 
     } 
    } 

    public Rules(final String customerId){ 
     setLayout(new FlowLayout(10)); 
     List<ColumnConfig> configs = new ArrayList<ColumnConfig>(); 

     XTemplate tpl = XTemplate.create("<p><b>Name: </b> {name}</p><br><p><b>Type: </b> {type}</p><br><p><b>Value:</b> {value}</p>><br>"); 

     RowExpander expander = new RowExpander(); 
     expander.setTemplate(tpl); 
     configs.add(expander); 


     ColumnConfig column = new ColumnConfig(); 
     column.setId("name"); 
     column.setHeader("Name"); 


     TextField<String> text = new TextField<String>(); 
     text.setAllowBlank(false); 
     column.setEditor(new CellEditor(text)); 
     configs.add(column); 

     final SimpleComboBox<String> combo = new SimpleComboBox<String>(); 
     combo.setForceSelection(true); 
     combo.setTriggerAction(TriggerAction.ALL); 
     combo.add("keywords"); 
     combo.add("regexps"); 

     CellEditor editor = new CellEditor(combo) { 
      @Override 
      public Object preProcessValue(Object value) { 
       if (value == null) { 
        return value; 
       } 
       return combo.findModel(value.toString()); 
      } 

      @Override 
      public Object postProcessValue(Object value) { 
       if (value == null) { 
        return value; 
       } 
       return ((ModelData) value).get("value"); 
      } 
     }; 

     column = new ColumnConfig(); 
     column.setId("type"); 
     column.setHeader("Type"); 
     column.setEditor(editor); 
     column.setWidth(220); 
     configs.add(column); 

     column = new ColumnConfig(); 
     column.setId("value"); 
     column.setHeader("Value"); 
     column.setWidth(650); 

     TextField<String> valueText = new TextField<String>(); 
     valueText.setAllowBlank(false); 
     column.setEditor(new CellEditor(valueText)); 
     configs.add(column); 

     CheckColumnConfig checkColumn = new CheckColumnConfig("accepted", "", 55); 
     CellEditor checkBoxEditor = new CellEditor(new CheckBox()); 
     checkColumn.setEditor(checkBoxEditor); 
     configs.add(checkColumn); 

     store = new ListStore<PropertyItem>(); 
     getPropslist(customerId); 

     ColumnModel cm = new ColumnModel(configs); 

     setHeading("Settings"); 
     setFrame(true); 
     setLayout(new FitLayout()); 

     grid = new EditorGrid<PropertyItem>(store, cm); 
     grid.setAutoExpandColumn("name"); 
     grid.getAriaSupport().setLabelledBy(getHeader().getId() + "-label"); 
     grid.setBorders(true); 
     grid.addPlugin(expander); 
     add(grid); 

     ToolBar toolBar = new ToolBar(); 
     //contentPanel.setTopComponent(toolBar); 
     setTopComponent(toolBar); 
     //contentPanel.setButtonAlign(Style.HorizontalAlignment.RIGHT); 
     setButtonAlign(Style.HorizontalAlignment.RIGHT); 

     //contentPanel.addButton(new Button("Save", new SelectionListener<ButtonEvent>() { 
     addButton(new Button("Save", new SelectionListener<ButtonEvent>() { 
      @Override 
      public void componentSelected(ButtonEvent ce) { 
       store.commitChanges(); 
       saveProperties(store, customerId); 
      } 
     })); 

     Button add = new Button("Add"); 
     add.addSelectionListener(new SelectionListener<ButtonEvent>() { 
      @Override 
      public void componentSelected(ButtonEvent ce) { 
       grid.stopEditing(); 
       store.insert(createRecord(), 0); 
       grid.startEditing(0, 0); 
      } 
     }); 
     toolBar.add(add); 

     grid.addListener(Events.ViewReady, new Listener<ComponentEvent>() { 
      public void handleEvent(ComponentEvent be) { 
       grid.getStore().addListener(Store.Add, new Listener<StoreEvent<PropertyItem>>() { 
        public void handleEvent(StoreEvent<PropertyItem> be) { 
         doAutoHeight(); 
        } 
       }); 
       doAutoHeight(); 
      } 
     }); 

     grid.getColumnModel().addListener(Events.HiddenChange, new Listener<ColumnModelEvent>() { 
      public void handleEvent(ColumnModelEvent be) { 
       doAutoHeight(); 
      } 
     }); 
     //add(contentPanel); 
    }      
} 

我沒有什麼補充。我猜一切都很清楚。 如何做到這一點？

Answer 1

TL; DR，但如果你想創建一個滾動的網格，你應該避免這種呼叫：

grid.getView().getScroller().setStyleAttribute("overflowY", "hidden"); 

GXT網格默認配置爲滾動如果內容太長，所以沒有多餘的需要付出努力。