Hello!
Im struggling with an rendering issue in a Dialog:
I have the following (simple) piece of code
Code:
import com.google.gwt.user.client.Element;
import com.extjs.gxt.ui.client.Style.Orientation;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.Dialog;
import com.extjs.gxt.ui.client.widget.form.CheckBox;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.RowData;
import com.extjs.gxt.ui.client.widget.layout.RowLayout;
public class TerminAnkgdDialog extends Dialog {
private ModelData termin;
private LayoutContainerWidget mainContainer = null;
private LayoutContainerWidget topContainer = null;
private LayoutContainerWidget bottomContainer = null;
@Override
protected void onRender(Element parent, int pos) {
super.onRender(parent, pos);
this.setButtons("");
this.setShadow(true);
this.setModal(true);
this.setWidth(480);
this.setHeight(600);
this.setLayout(new FitLayout());
this.mainContainer = new LayoutContainer();
// VBoxLayout vBoxLayout = new VBoxLayout();
// vBoxLayout.setPadding(new Padding(5));
// vBoxLayout.setVBoxLayoutAlign(VBoxLayoutAlign.STRETCH);
this.mainContainer.setLayout(new RowLayout(Orientation.VERTICAL));
this.topContainer = new LayoutContainer();
this.topContainer.setBorders(true);
this.bottomContainer = new LayoutContainer();
this.bottomContainer.setBorders(true);
this.mainContainer.add(this.topContainer, new RowData(-1, 0.8, new Margins(5)));
this.mainContainer.add(this.bottomContainer, new RowData(-1, 0.2, new Margins(5)));
this.add(this.mainContainer);
}
}
It simply shows a Dialog with LayoutContainers with 80 % to 20 %.
The problem is: It is only rendered correctly after the Dialog is being resized:
Before resizing:
before.jpg
After resizing:
after.PNG
Does anyone know what am i doing wrong?
Thank you very much