How to set width of the FormPanel in the GXT? (setWidth method crashes the application). And how to enable Scroll?

Question

I'm using GXT 2.2.4.

I try to set width of my custom, but setWidth method crases my application.

Here is form code:

public class CustomForm extends FormPanel {

public CustomForm () {
    setHeading("My custom form"); 
}

@Override
protected void onRender(Element parent, int pos) {
    super.onRender(parent, pos);

        setFrame(true);  
        setCollapsible(true); 

        setWidth("350");  //This crashes the application
        setScrollMode(Scroll.AUTOY); //Not work

        final TextField<String> firstName = new TextField<String>();  
        firstName.setFieldLabel("First Name *");  
        firstName.setAllowBlank(false);  
        firstName.setValue("Peter");
        add(firstName);  

        final TextField<String> lastName = new TextField<String>();  
        lastName.setFieldLabel("Last Name *");
        lastName.setAllowBlank(false);  
        lastName.setValue("Jones");
        add(lastName);  

        Radio radio1 = new Radio();  
        radio1.setBoxLabel("Male");  
        radio1.setValue(true);  

        Radio radio2 = new Radio();  
        radio2.setBoxLabel("Female");

        final RadioGroup rgGender = new RadioGroup();  
        rgGender.setFieldLabel("Gender *");  
        rgGender.add(radio1);  
        rgGender.add(radio2);  
        rgGender.setSelectionRequired(true);
        add(rgGender);  

        final DateField dateOfBirth = new DateField();  
        dateOfBirth.setFieldLabel("Date of Birth");  
        add(dateOfBirth);  

        final TextField<String> phone = new TextField<String>();  
        phone.setFieldLabel("Phone");  
        add(phone);  

        Button btnClear = new Button("Clear");

        btnClear.addSelectionListener(new
                SelectionListener<ButtonEvent>() {
                    public void componentSelected(ButtonEvent ce) {
                        reset();

                    }
            });

        addButton(btnClear);  
}

And here is entry point code:

private final VerticalPanel formPanel = new VerticalPanel();
@Override
public void onModuleLoad() {    

    Viewport viewport = new Viewport();
    viewport.setLayout(new RowLayout(Orientation.HORIZONTAL));

    formPanel.add(new CustomForm());

    formPanel.setSpacing(10); 
    viewport.add(formPanel);

    RootPanel.get("gwtcontent").add(viewport);
}

This exception appears (used mvn gwt:run -Dgwt.noserver=true):

onModuleLoad() threw an exception
Exception while loading module com.apenimed.rls.demo.client.DemoEntryPoint. See Development Mode for details.
java.lang.reflect.InvocationTargetException at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:57) at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) at java.lang.reflect.Method.invoke(Method.java:601) at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:396) at com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:193) at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:510) at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:352) at java.lang.Thread.run(Thread.java:722) Caused by: java.lang.AssertionError: The element may not be null at com.extjs.gxt.ui.client.core.El.(El.java:219) at com.extjs.gxt.ui.client.core.El.subChild(El.java:3027) at com.extjs.gxt.ui.client.widget.ContentPanel.getFrameSize(ContentPanel.java:882) at com.extjs.gxt.ui.client.widget.ContentPanel.onResize(ContentPanel.java:1164) at com.extjs.gxt.ui.client.widget.BoxComponent.setSize(BoxComponent.java:509) at com.extjs.gxt.ui.client.widget.BoxComponent.setSize(BoxComponent.java:559) at com.extjs.gxt.ui.client.widget.BoxComponent.afterRender(BoxComponent.java:685) at com.extjs.gxt.ui.client.widget.ScrollContainer.afterRender(ScrollContainer.java:199) at com.extjs.gxt.ui.client.widget.Component.render(Component.java:1111) at com.extjs.gxt.ui.client.widget.Component.render(Component.java:986) at com.extjs.gxt.ui.client.widget.layout.TableLayout.renderComponent(TableLayout.java:411) at com.extjs.gxt.ui.client.widget.Layout.renderAll(Layout.java:352) at com.extjs.gxt.ui.client.widget.layout.TableLayout.onLayout(TableLayout.java:402) at com.extjs.gxt.ui.client.widget.Layout.layout(Layout.java:114) at com.extjs.gxt.ui.client.widget.Container.doLayout(Container.java:351) at com.extjs.gxt.ui.client.widget.Container.layout(Container.java:443) at com.extjs.gxt.ui.client.widget.LayoutContainer.layout(LayoutContainer.java:246) at com.extjs.gxt.ui.client.widget.Container.layout(Container.java:426) at com.extjs.gxt.ui.client.widget.LayoutContainer.layout(LayoutContainer.java:241) at com.extjs.gxt.ui.client.widget.VerticalPanel.onRender(VerticalPanel.java:158) at com.extjs.gxt.ui.client.widget.Component.render(Component.java:1023) at com.extjs.gxt.ui.client.widget.Layout.renderComponent(Layout.java:361) at com.extjs.gxt.ui.client.widget.Layout.renderAll(Layout.java:352) at com.extjs.gxt.ui.client.widget.Layout.onLayout(Layout.java:318) at com.extjs.gxt.ui.client.widget.layout.RowLayout.onLayout(RowLayout.java:258) at com.extjs.gxt.ui.client.widget.Layout.layout(Layout.java:114) at com.extjs.gxt.ui.client.widget.Layout$3.handleEvent(Layout.java:170) at com.extjs.gxt.ui.client.util.DelayedTask$1.run(DelayedTask.java:30) at com.extjs.gxt.ui.client.util.DelayedTask.delay(DelayedTask.java:52) at com.extjs.gxt.ui.client.widget.Layout.onResize(Layout.java:344) at com.extjs.gxt.ui.client.widget.Layout$2.handleEvent(Layout.java:135) at com.extjs.gxt.ui.client.widget.Layout$2.handleEvent(Layout.java:1) at com.extjs.gxt.ui.client.event.BaseObservable.callListener(BaseObservable.java:178) at com.extjs.gxt.ui.client.event.BaseObservable.fireEvent(BaseObservable.java:86) at com.extjs.gxt.ui.client.widget.Component.fireEvent(Component.java:456) at com.extjs.gxt.ui.client.widget.BoxComponent.setSize(BoxComponent.java:522) at com.extjs.gxt.ui.client.widget.BoxComponent.setSize(BoxComponent.java:559) at com.extjs.gxt.ui.client.widget.BoxComponent.afterRender(BoxComponent.java:685) at com.extjs.gxt.ui.client.widget.ScrollContainer.afterRender(ScrollContainer.java:199) at com.extjs.gxt.ui.client.widget.Component.render(Component.java:1111) at com.extjs.gxt.ui.client.widget.Component.onAttach(Component.java:1637) at com.extjs.gxt.ui.client.widget.Container.onAttach(Container.java:470) at com.extjs.gxt.ui.client.widget.Viewport.onAttach(Viewport.java:91) at com.google.gwt.user.client.ui.Widget.setParent(Widget.java:470) at com.google.gwt.user.client.ui.Panel.adopt(Panel.java:127) at com.google.gwt.user.client.ui.ComplexPanel.add(ComplexPanel.java:97) at com.google.gwt.user.client.ui.AbsolutePanel.add(AbsolutePanel.java:97) at com.apenimed.rls.demo.client.DemoEntryPoint.onModuleLoad(DemoEntryPoint.java:117) ... 9 more

So how to solve this problem?

Also I have a question how to enable vertical scroling for form panel when it doesn't fit screen? setScrollMode(Scroll.AUTOY) not work.

Answer 1

I would simply try to set the width after it is rendered.

CustomForm c =new CustomForm();
c.setWidth("350");
formPanel.add(c);

If that doesn't work taking the setWidth out of onRender(), I would do that for everything you can in onModuleLoad() instead. In fact, I don't see anything in your onRender() method that needs to be there instead of in onModuleLoad();