Results 1 to 8 of 8

Thread: General EXT GWT questions

  1. #1
    Ext User
    Join Date
    May 2008
    Posts
    7
    Vote Rating
    0
      0  

    Default General EXT GWT questions

    Hi,

    I am evaluating EXT GWT for a project because of the rich UI framework. This project has a few requirements and I want to besure EXT GWT meets those requirements. The application that I will be building will need to be a standalone app as well as it will be embedded into another app / HTML / JSP page.

    I have tweaked the explorer demo to render into a Element that is defined in the HTML file (i.e. TD) by changing all references of RootPanel.get() to RootPanel.get("my_td_id_here") but that does not seem to work. When the explorer module is loaded it overwrites the existing Elements on the HTML Page. Is there a way to embed this application into a HTML page that has some HTML Markup and display both the HTML Markup and the app on the same page?

    Thanks,

    Scott.

  2. #2
    Sencha User darrellmeyer's Avatar
    Join Date
    May 2007
    Location
    Washington, DC
    Posts
    2,242
    Vote Rating
    2
      0  

    Default

    Yes it is, but you cannot use a Viewport. You will need to use a Container and add it to the proper slot. You will need to size the container manually since you are not using a Viewport.

  3. #3
    Sencha User
    Join Date
    Mar 2008
    Posts
    11
    Vote Rating
    1
      0  

    Default

    I got the same pb. Following your response Darell, I used a container, it seems to work but is there any way to size the container according to its widget parent.

    Example :
    <td id="slot1" width="100%" height="100%"></td>

    When I do RootPanel.get("slot1").add(container), I would like the container to grow according to the available space of its TD when the user resize the window.

    Is it possible ?

    Thanx

    Sam

  4. #4
    Ext User
    Join Date
    May 2008
    Posts
    7
    Vote Rating
    0
      0  

    Default

    I have modified my copy of the Viewport class and have had some success but I wanted to see if anybody else had any thoughts on the approach I am taking to solve this problem. Below is the code snippet of the definition for the resize Listener for my viewport. This seems to handle the resize properly but if I have any HTML Elements defined below the embedded app they do not get displayed because the calculation does not factor in their size.

    // My Viewport class...
    private DelayedTask task = new DelayedTask(new Listener<ComponentEvent>() {
    public void handleEvent(ComponentEvent ce) {
    int left = el.dom.getParentElement().getAbsoluteLeft();
    int top = el.dom.getParentElement().getAbsoluteTop();
    int width = el.dom.getParentElement().getOffsetWidth();
    int height = el.dom.getParentElement().getOffsetHeight();
    width = Window.getClientWidth() - left;
    height = Window.getClientHeight() - top;
    setBounds(left, top, width, height);
    }
    });

    // Also the onLayout() function which sets the size would need to be modified as well.

    // Appview.java
    protected void initialize() {
    GenericContentPanel contentPanel;
    contentPanel = new GenericContentPanel();
    contentPanel.setWidth("100%");
    contentPanel.setHeight("100%");
    contentPanel.setLayout(new BorderLayout());

    createNorth();
    createWest();
    createCenter();
    viewport = new MyViewport();
    viewport.setLayout(new FitLayout());
    viewport.add(contentPanel);
    RootPanel.get("MY_ID_GOES_HERE").add(viewport);
    }

    Does anybody have any better ideas on how to handle the sizing problem?

    Thanks again!

    Scott Dever.

  5. #5
    Sencha User darrellmeyer's Avatar
    Join Date
    May 2007
    Location
    Washington, DC
    Posts
    2,242
    Vote Rating
    2
      0  

    Default

    There is no problem embedding a GXT container into a "slot" whose size is variable. I created some test code to demonstrate.

    I started with this HTML (note the nested div with relative positioning which is needed for BorderLayout):

    Code:
    <table height="100%" width="100%" border="0">
        <tr>
            <td height="25%" width="100%">top</td>
        </tr>
        <tr>
            <td height="50%" width="100%">
                <div id="slot1"  style="width:100%;height:100%;position:relative"></div>
            </td>
        </tr>
        <tr>
            <td height="25%" width="100%">bottom</td>
        </tr>
    </table>
    There are 3 rows. The top and bottom are 25% tall, the middle is 50% tall. The goal is to add a GXT container to the center row and give it a BorderLayout.

    Here is the code I ended up with:

    Code:
      public void onModuleLoad() {
        Window.enableScrolling(false);
    
        final LayoutContainer c = new LayoutContainer();
    
        c.setSize("100%", "100%");
        c.setLayout(new BorderLayout());
        c.setBorders(true);
    
        ContentPanel center = new ContentPanel();
        center.setHeading("Center");
        BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
        centerData.setMargins(new Margins(5, 5, 5, 0));
        c.add(center, centerData);
    
        ContentPanel west = new ContentPanel();
        west.setHeading("West");
    
        BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, 200);
        westData.setMargins(new Margins(5, 5, 5, 5));
        c.add(west, westData);
    
        final DelayedTask task = new DelayedTask(new Listener<BaseEvent>() {
          public void handleEvent(BaseEvent be) {
            El td = c.el().getParent();
            c.setSize(td.getWidth(), td.getHeight());
          }
        });
    
        Window.addWindowResizeListener(new WindowResizeListener() {
          public void onWindowResized(int width, int height) {
            task.delay(200);
          }
        });
    
        RootPanel.get("slot1").add(c);
      }
    Everything works as expected. The code is using the beta3 API, but it should be easy to update code to use beta2. Is this what your were trying to do?

  6. #6
    Ext User
    Join Date
    May 2008
    Posts
    7
    Vote Rating
    0
      0  

    Default

    Thanks and that worked Great!

  7. #7
    Ext User
    Join Date
    May 2008
    Posts
    7
    Vote Rating
    0
      0  

    Default

    Hey Darrell - It looks like the code you provided is broken in beta 4. Your code worked great in Beta 3 but as soon as I upgraded to Beta 4 it stopped working. It works if you resize larger but not if you resize smaller.

    This is what I did to test:
    I took the explorer demo and replaced the Viewport class with my implementation which was based on the code you provided. It works if you resize larger but not smaller.

    Thanks,

    Scott.

  8. #8
    Sencha User darrellmeyer's Avatar
    Join Date
    May 2007
    Location
    Washington, DC
    Posts
    2,242
    Vote Rating
    2
      0  

    Default

    There was a bug with BorderLayout that has been fixed. You will also need to make 1 change to your code and there is a workaround to the bug:

    Code:
        final DelayedTask task = new DelayedTask(new Listener<BaseEvent>() {
          public void handleEvent(BaseEvent be) {
            El td = c.el().getParent();
            // need to hide the container to get accurate size of td
            c.setVisible(false);
            int w = td.getWidth();
            int h = td.getHeight();
            c.setVisible(true);
            c.setSize(w, h);
            c.layout(); // workaround
          }
        });

Posting Permissions

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