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网格滚动，因此不需要额外的工作。

如何使gxt页面可滚动

1 个答案: