Results 1 to 5 of 5

Thread: Dialog not displayed properly

  1. 23 Jul 2008, 9:59 AM #1
    dnedde
    dnedde is offline
    Ext User
    Join Date
    Jul 2008
    Location
    Andover, MA USA
    Posts
    8
    Vote Rating
    0
      0  

    Default 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 Attached Images
    Reply With Quote Reply With Quote
  2. 23 Jul 2008, 1:17 PM #2
    gslender
    gslender is offline
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    4
      0  

    Default

    sounds like problems with style sheets or doc type.... post your html file
    Reply With Quote Reply With Quote
  3. 23 Jul 2008, 1:22 PM #3
    dnedde
    dnedde is offline
    Ext User
    Join Date
    Jul 2008
    Location
    Andover, MA USA
    Posts
    8
    Vote Rating
    0
      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>
    Reply With Quote Reply With Quote
  4. 23 Jul 2008, 1:31 PM #4
    gslender
    gslender is offline
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    4
      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">
    Reply With Quote Reply With Quote
  5. 23 Jul 2008, 1:38 PM #5
    dnedde
    dnedde is offline
    Ext User
    Join Date
    Jul 2008
    Location
    Andover, MA USA
    Posts
    8
    Vote Rating
    0
      0  

    Default

    Thanks, that did the trick.
    Reply With Quote Reply With Quote
« ALIGN_RIGHT and JS errors | ContextMenu »

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules