Dialog not displayed properly

**dnedde** · 23 Jul 2008 9:59 AM

Hi,

I'm trying to do a simple hello, world application with a button that displays a dialog. I'm adapting the GWT example code to use Gxt. When I run the application and click the button, the dialog is spread out over the page (see attachment). I copied portions of code from the example com.extjs.gxt.samples.explorer.client.pages.DialogPage. I'm using Eclipse and Cypal, so I didn't follow the screencast exactly, since Cypal does some of the configuration for you. This happens in hosted and web modes.

Thanks for any help you can give me.

Code:

package net.juniper.client;

import com.extjs.gxt.ui.client.Style;
import com.extjs.gxt.ui.client.Style.Scroll;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.widget.Dialog;
import com.extjs.gxt.ui.client.widget.MessageBox;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.LabelField;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.RootPanel;

public class SearchIncident implements EntryPoint {

    /**
     * This is the entry point method.
     */
    public void onModuleLoad() {

        Image img = new Image("http://code.google.com/webtoolkit/logo-185x175.png");
        Button button = new Button("Click me Ext");

        VerticalPanel vPanel = new VerticalPanel();
        // We can add style names.
        vPanel.setHorizontalAlign(Style.HorizontalAlignment.CENTER);
        vPanel.add(img);


        //////////////////////////////////////////////////////////////////////
        final Dialog mysimple = new Dialog();
        mysimple.setHeading("Dialog Test");
        mysimple.setButtons(Dialog.YESNO);
        mysimple.setBodyStyleName("pad-text");
        mysimple.addText("bla, bla, bla");
        mysimple.setScrollMode(Scroll.AUTO);
        mysimple.setHideOnButtonClick(true);

        Button simpleButton = new Button("Simple", new SelectionListener<ComponentEvent>() {
                    public void componentSelected(ComponentEvent ce) {
                        MessageBox.confirm("Demo App", "GXT message", null);
                    }
            });
        vPanel.add(simpleButton);
        //////////////////////////////////////////////////////////////////////

        // Add image and button to the RootPanel
        RootPanel.get().add(vPanel);

    }
}

**gslender** · 23 Jul 2008 1:17 PM

sounds like problems with style sheets or doc type.... post your html file

**dnedde** · 23 Jul 2008 1:22 PM

Here is my <project>\src\com\mycompany\public\SearchIncident.html. This was autogenerated by "Cypal Studio for GWT", I believe.

Thanks for your help.

Code:

<html>
    <head>
    
        <!--                                           -->
        <!-- Any title is fine                         -->
        <!--                                           -->
        <title>Wrapper HTML for SearchIncident</title>

        <!--                                           -->
        <!-- Use normal html, such as style            -->
        <!--                                           -->
        <style>
            body,td,a,div,.p{font-family:arial,sans-serif}
            div,td{color:#000000}
            a:link,.w,.w a:link{color:#0000cc}
            a:visited{color:#551a8b}
            a:active{color:#ff0000}
        </style>

        <!--                                           -->
        <!-- This script loads your compiled module.   -->
        <!-- If you add any GWT meta tags, they must   -->
        <!-- be added before this line.                -->
        <!--                                           -->
    </head>

    <!--                                           -->
    <!-- The body can have arbitrary html, or      -->
    <!-- you can leave the body empty if you want  -->
    <!-- to create a completely dynamic ui         -->
    <!--                                           -->
    <body>

        <!-- OPTIONAL: include this if you want history support -->
        <iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
        
           <script type="text/javascript" language="javascript" src="net.juniper.SearchIncident.nocache.js"></script>
           
           
    </body>
</html>

**gslender** · 23 Jul 2008 1:31 PM

you are missing the CSS file in the html - follow the setup guide http://extjs.com/helpcenter/index.jsp and also ensure you have this doctype set

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

**dnedde** · 23 Jul 2008 1:38 PM

Thanks, that did the trick.

Dialog not displayed properly

Thread Tools

Search Thread

Display

Dialog not displayed properly

Dialog not displayed properly