How to center a dialog box.

[phamtranquocviet]

Hi,
How do you center a dialog box right in the middle of the page, and it automatically adjusts when the monitor size changes?

I tried various styles I got from Google in the place holder (<div id="login" style="tries_from_google"></div>) of my dialog, none works.

Here is my code:
import com.extjs.gxt.ui.client.widget.Dialog;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.layout.FormLayout;

public class Login extends Dialog
{
private TextField<String> userName;
private TextField<String> password;

public Login()
{
makeGui();
}

private void makeGui()
{
init();
makeForm();
makeUserName();
makePassword();
}

private void makePassword()
{
password = new TextField<String>();
password.setFieldLabel("Password");
password.setAllowBlank(false);
add(password);
}

private void makeUserName()
{
userName = new TextField<String>();
userName.setFieldLabel("Username");
userName.setAllowBlank(false);
add(userName);
}

private void makeForm()
{
FormLayout layout = new FormLayout();
layout.setLabelWidth(90);
layout.setDefaultWidth(155);
setLayout(layout);
}

private void init()
{
setHeading("Login");
setButtons("");
setResizable(false);
setClosable(false);
setDraggable(false);
}
}

===========================================
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class Main implements EntryPoint
{
public void onModuleLoad()
{
Login login = new Login();
login.show();
RootPanel.get("login").add(login);
}
}


I also tried login.center(), but it does not work.
Thanks.

[gslender]

try...

      com.google.gwt.user.client.Window.addWindowResizeListener(new WindowResizeListener() {
        public void onWindowResized(int width, int height) {
          dialog.center();
        }
      });

[phamtranquocviet]

Hi gslender,

Attaching your listener to my plain "login" widget does not work, but it works after I first added my "login" widget to a viewport. Here is the new working code:

import com.extjs.gxt.ui.client.widget.Viewport;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.WindowResizeListener;
import com.google.gwt.user.client.ui.RootPanel;

public class Main implements EntryPoint
{
private Login login;
private Viewport viewport;

public void onModuleLoad()
{
login = new Login();
login.show();
login.center();
com.google.gwt.user.client.Window.addWindowResizeListener(new WindowResizeListener()
{
public void onWindowResized(int width, int height)
{
login.center();
}
});
viewport = new Viewport();
viewport.add(login);
RootPanel.get().add(viewport);
}
}

One problem, now my username and password text fields now becomes read-only. Can't type text into it. I have tried login.enable(), setEnable(), etc... None works. How do you prevent viewport from altering the behavior of the "login" widget so that we can type into the text boxes.
Thanks.

[gslender]

no you shouldn't add a dialog to the viewport like that - that is wrong

add the listener code to the onRender method (make sure you call super) and show the dialog as per normal

[phamtranquocviet]

By the way, I could type text into the text fields without the viewport. But then I can't center it using login.center() because center() only works if the "login" is on a viewport, according to the doc http://extjs.com/deploy/gxtdocs/com/...w.html#center()

[phamtranquocviet]

Thanks for the post. I tried overriding it like this but it still does not work:

import com.extjs.gxt.ui.client.widget.Dialog;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.layout.FormLayout;
import com.google.gwt.user.client.WindowResizeListener;

public class Login extends Dialog
{
private TextField<String> userName;
private TextField<String> password;

public Login()
{
makeGui();
}

private void makeGui()
{
init();
makeForm();
makeUserName();
makePassword();
}

......
......

@Override
public void render(com.google.gwt.user.client.Element target)
{
super.render(target);
com.google.gwt.user.client.Window.addWindowResizeListener(new WindowResizeListener()
{
public void onWindowResized(int width, int height)
{
com.google.gwt.user.client.Window.center();
}
});
}
}

Attached is the entire project so that you can see what's I am missing. thanks.