1. #1
    Ext User
    Join Date
    Jul 2008
    Location
    Andover, MA USA
    Posts
    8
    Vote Rating
    0
    dnedde is on a distinguished road

      0  

    Default Dialog not displayed properly

    Dialog not displayed properly


    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);
    
        }
    }
    Attached Images

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

      0  

    Default


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

  3. #3
    Ext User
    Join Date
    Jul 2008
    Location
    Andover, MA USA
    Posts
    8
    Vote Rating
    0
    dnedde is on a distinguished road

      0  

    Default


    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>

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

      0  

    Default


    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">

  5. #5
    Ext User
    Join Date
    Jul 2008
    Location
    Andover, MA USA
    Posts
    8
    Vote Rating
    0
    dnedde is on a distinguished road

      0  

    Default


    Thanks, that did the trick.

Thread Participants: 1