1. #1
    Ext GWT Premium Member
    Join Date
    May 2008
    Posts
    11
    Vote Rating
    0
    Speedbird is on a distinguished road

      0  

    Default GTX 1.0 - problem with viewport - empty browser

    GTX 1.0 - problem with viewport - empty browser


    Hello,

    for a sample application I want to add my Components to a Viewport to monitor window resizing. Unfortunately if I do so, the browser (hosted mode) shows an empty screen.

    If I add them bei using the Rootpanel.get() method it works fine.

    Here is the code of the entrypoint:
    Code:
     
    public class TestGWT implements EntryPoint {
     
        public void onModuleLoad() {
           Viewport vp = new Viewport(); 
           ContentPanel cp = new ContentPanel(); 
           cp.setCollapsible(true);
           cp.setWidth(200); 
           cp.setTitle("Collapsible"); 
           cp.addText("Sample"); 
           cp.setVisible(true);
           vp.add(cp); 
           vp.layout(true); 
       }
    }
    This is the HTML-Page:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
    <html> <head> <title>TEST-GWT</title>
    <link rel="stylesheet" type="text/css" href="css/ext-all.css" />
    </head>
    <body style="overflow: hidden"> <script type="text/javascript" language="javascript" src="com.testapp.TestGWT.nocache.js"></script> </body>
    </html>
    ...and the Module-Definition:
    Code:
     
    
    <module>
    <!-- Inherit the core Web Toolkit stuff. -->
    <inherits name='com.google.gwt.user.User'/> <inherits name='com.google.gwt.i18n.I18N' />
    <inherits name='com.extjs.gxt.ui.GXT'/>
    <!-- Specify the app entry point class. --> <entry-point class='com.testapp.TestGWT'/>
    </module>
    [LEFT]If I copy the loading-indicator from the explorer sample into my HTML-page, the indicator won

  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  

    Default


    You need to add the viewport to the rootpanel... you were almost there !!

  3. #3
    Ext GWT Premium Member
    Join Date
    May 2008
    Posts
    11
    Vote Rating
    0
    Speedbird is on a distinguished road

      0  

    Default


    So simple...

    I overlooked that.

    Thank you!

  4. #4
    Ext User
    Join Date
    May 2008
    Posts
    27
    Vote Rating
    0
    Daniel Kurka is on a distinguished road

      0  

    Default


    I seem to have the same problem

    I tried out the Borderlayout code from the explorer demo.
    And i dont get anything in the browser.

    So i also added the viewport to the rootpanel, but nothing changes.

    Heres the code:

    Code:
    package com.dvelop.d3web.client;
    
    import com.extjs.gxt.ui.client.Style.LayoutRegion;
    import com.extjs.gxt.ui.client.util.Margins;
    import com.extjs.gxt.ui.client.widget.LayoutContainer;
    import com.extjs.gxt.ui.client.widget.ContentPanel;
    import com.extjs.gxt.ui.client.widget.Viewport;
    import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
    import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
    import com.extjs.gxt.ui.client.widget.layout.FitLayout;
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.Element;
    import com.google.gwt.user.client.ui.RootPanel;
    
    import com.extjs.gxt.ui.client.widget.Button; 
    
    public class Explorer extends LayoutContainer implements EntryPoint {
    
        public void onModuleLoad() {
            Viewport v = new Viewport();
            v.add(this);
            v.layout(true);
            RootPanel.get().add(v);
        }
    
        public Explorer() {
            setData("layout", new FitLayout());
            
            
        }
    
        @Override
        protected void onRender(Element parent, int pos) {
            super.onRender(parent, pos);
            setLayout(new BorderLayout());
    
            ContentPanel north = new ContentPanel();
            ContentPanel west = new ContentPanel();
            ContentPanel center = new ContentPanel();
            ContentPanel east = new ContentPanel();
            ContentPanel south = new ContentPanel();
    
            BorderLayoutData northData = new BorderLayoutData(LayoutRegion.NORTH,
                    100);
            northData.setSplit(true);
            northData.setMargins(new Margins(5, 5, 0, 5));
    
            BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, 200);
            westData.setSplit(true);
            westData.setCollapsible(true);
            westData.setMargins(new Margins(5));
    
            BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
            centerData.setMargins(new Margins(5, 0, 5, 0));
    
            BorderLayoutData eastData = new BorderLayoutData(LayoutRegion.EAST, 200);
            eastData.setSplit(true);
            eastData.setCollapsible(true);
            eastData.setMargins(new Margins(5));
    
            BorderLayoutData southData = new BorderLayoutData(LayoutRegion.SOUTH,
                    100);
            southData.setSplit(true);
            southData.setMargins(new Margins(0, 5, 5, 5));
            
            add(west, westData);
            add(center, centerData);
            add(east, eastData);
            add(south, southData);
    
        }
    
    }

  5. #5
    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


    you need to set a layout on the viewport

    add this...

    Code:
    	v.setLayout(new FitLayout());

  6. #6
    Ext User
    Join Date
    May 2008
    Posts
    27
    Vote Rating
    0
    Daniel Kurka is on a distinguished road

      0  

    Default


    Okay thanks works fine now.

    Someone should edit the explorer example and add those two lines in the onModuleLoad() then:

    Code:
    v.setLayout(new FitLayout());
    RootPanel.get().add(v);

  7. #7
    Ext User
    Join Date
    Aug 2009
    Posts
    3
    Vote Rating
    0
    mwildam is on a distinguished road

      0  

    Default


    I tried to follow the advice but still an empty browser window opening.
    Code:
    /*
     * To change this template, choose Tools | Templates
     * and open the template in the editor.
     */
    package org.TestGWT.client;
    
    import com.extjs.gxt.ui.client.Style.LayoutRegion;
    import com.extjs.gxt.ui.client.util.Margins;
    import com.extjs.gxt.ui.client.widget.LayoutContainer;
    import com.extjs.gxt.ui.client.widget.ContentPanel;
    import com.extjs.gxt.ui.client.widget.Viewport;
    import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
    import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
    import com.extjs.gxt.ui.client.widget.layout.FitLayout;
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.Element;
    import com.google.gwt.user.client.ui.RootPanel;
    
    
    public class BorderLayoutExample extends LayoutContainer implements EntryPoint {
    
        @Override
        public void onModuleLoad() {
            Viewport v = new Viewport();
            v.add(this);
            v.layout(true);
            v.setLayout(new FitLayout());
            RootPanel.get().add(v);
        }
    
        public void BorderlayoutExample() {
            setData("layout", new FitLayout());
        }
    
        @Override
        protected void onRender(Element parent, int pos) {
            super.onRender(parent, pos);
            setLayout(new BorderLayout());
    
            ContentPanel north = new ContentPanel();
            ContentPanel west = new ContentPanel();
            ContentPanel center = new ContentPanel();
            ContentPanel east = new ContentPanel();
            ContentPanel south = new ContentPanel();
    
            BorderLayoutData northData = new BorderLayoutData(LayoutRegion.NORTH,
                    100);
            northData.setSplit(true);
            northData.setMargins(new Margins(5, 5, 0, 5));
    
            BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, 200);
            westData.setSplit(true);
            westData.setCollapsible(true);
            westData.setMargins(new Margins(5));
    
            BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
            centerData.setMargins(new Margins(5, 0, 5, 0));
    
            BorderLayoutData eastData = new BorderLayoutData(LayoutRegion.EAST, 200);
            eastData.setSplit(true);
            eastData.setCollapsible(true);
            eastData.setMargins(new Margins(5));
    
            BorderLayoutData southData = new BorderLayoutData(LayoutRegion.SOUTH,
                    100);
            southData.setSplit(true);
            southData.setMargins(new Margins(0, 5, 5, 5));
    
            add(west, westData);
            add(center, centerData);
            add(east, eastData);
            add(south, southData);
    
            west.layout();
            center.layout();
            east.layout();
            south.layout();
        }
    
    }
    BTW: I am using GWT 1.7, GXT 2.0.1 and NetBeans 6.5 - not sure if the problem is related to a mistake in the setup procedure (which is only shown for Eclipse).

    Any idea?

  8. #8
    Ext User
    Join Date
    Aug 2009
    Posts
    3
    Vote Rating
    0
    mwildam is on a distinguished road

      0  

    Default


    I tried now a very simple sample with NetBeans and GWT4NB:
    Code:
    package org.TestExtGWT.client;
    
    import com.extjs.gxt.ui.client.widget.LayoutContainer;
    import com.extjs.gxt.ui.client.widget.TabItem;
    import com.extjs.gxt.ui.client.widget.TabPanel;
    import com.extjs.gxt.ui.client.widget.VerticalPanel;
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.RootPanel;
    
    public class ExtEntryPoint extends LayoutContainer implements EntryPoint
    {
    
        /** Creates a new instance of ExtEntryPoint */
        public ExtEntryPoint()
        {
        }
    
    
        @Override
        public void onModuleLoad()
        {
            VerticalPanel vPanel = new VerticalPanel();
            TabPanel tabs = new TabPanel();
            TabItem tab1 = new TabItem("Tab 1");
            TabItem tab2 = new TabItem("Tab 2");
    
            tabs.add(tab1);
            tabs.add(tab2);
    
            vPanel.setSpacing(10);
            vPanel.add(tabs);
    
            //add(vPanel);
            RootPanel.get().add(vPanel);
        }
    }
    And my Main.gwt.xml looks like:
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <module>
        <inherits name="com.google.gwt.user.User"/>
        <inherits name="com.extjs.gxt.ui.GXT"/>
        <entry-point class="org.TestExtGWT.client.ExtEntryPoint"/>
        <!-- Do not define servlets here, use web.xml -->
    </module>
    And my WelcomeGWT.html content is:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <meta name='gwt:module' content='org.TestExtGWT.Main=org.TestExtGWT.Main'>
            <link rel="stylesheet" type="text/css" href="css/ext-all.css" />
            <title>TestExtGWT</title>
        </head>
        <body>
            <script language="javascript" src="org.TestExtGWT.Main/org.TestExtGWT.Main.nocache.js"></script>
        </body>
    </html>
    What I do get now as output is a bullet list:
    • Tab 1
    • Tab 2
    What is (still) wrong here?

  9. #9
    Ext User
    Join Date
    Sep 2008
    Location
    Germany
    Posts
    961
    Vote Rating
    1
    Arno.Nyhm is on a distinguished road

      0  

    Default


    did you include the css stuff?

  10. #10
    Ext User
    Join Date
    Aug 2009
    Posts
    3
    Vote Rating
    0
    mwildam is on a distinguished road

      0  

    Default


    You mean the line
    Code:
    <link rel="stylesheet" type="text/css" href="css/ext-all.css" />
    ?

    Yes.