How to make the gxt page scrollable

Question

I have an app in which I need the page when it become too large to be scrollable. as for now it isn't. As for example I used the following one: example . Here is the code:

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);
    }                    
}

I have nothing to add. I guess everything is clear. How to do this?

Answer 1

TL;DR, but if you want to create a scrollable grid, you should probably avoid this call:

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

GXT grids are configured by default to scroll if the content is too long, so no extra effort is needed.