1. #1
    Sencha User
    Join Date
    Mar 2008
    Posts
    150
    Vote Rating
    1
    phamtranquocviet is on a distinguished road

      0  

    Default How to center a dialog box.

    How to center a dialog box.


    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.

  2. #2
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    3
    gslender is on a distinguished road

      0  

    Thumbs up


    try...

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

  3. #3
    Sencha User
    Join Date
    Mar 2008
    Posts
    150
    Vote Rating
    1
    phamtranquocviet is on a distinguished road

      0  

    Default


    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.

  4. #4
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    3
    gslender is on a distinguished road

      0  

    Default


    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

  5. #5
    Sencha User
    Join Date
    Mar 2008
    Posts
    150
    Vote Rating
    1
    phamtranquocviet is on a distinguished road

      0  

    Default


    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()

  6. #6
    Sencha User
    Join Date
    Mar 2008
    Posts
    150
    Vote Rating
    1
    phamtranquocviet is on a distinguished road

      0  

    Default


    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.
    Attached Files

Thread Participants: 1