1. #1
    Sencha User
    Join Date
    Oct 2010
    Location
    Seattle
    Posts
    25
    Vote Rating
    0
    SuperSloMo is on a distinguished road

      0  

    Default Help getting started with BorderLayout example

    Help getting started with BorderLayout example


    I am completely new to Ext GWT and don't have a lot of web GUI programming experience generally. The place I work now uses Ext GWS, and I have an assignment to create a new web app, so I decided to get started by naively taking one of the Sencha demos (the BorderLayout one) and putting the code into an onModuleLoad function. I created a Viewport object within the function and directed modified demo source code to use it, but I did it wrong and/or left something out because it displays only the labels and buttons in rows and columns and doesn't display the north, south, east and west panes. Clicking the buttons calls the componentSelect function defined in the code, but the display in the web pane doesn't change. Could you help me understand what I need to change or add to make this work the way the BorderLayout demo works? Thanks.

    Here is the source code I have so far:
    Code:
    package org.myorg.gwt.client;
    
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.FlexTable;
    import com.google.gwt.user.client.ui.RootPanel;
    
    import com.extjs.gxt.ui.client.event.ButtonEvent;
    import com.extjs.gxt.ui.client.event.SelectionListener;
    import com.extjs.gxt.ui.client.Style.LayoutRegion;
    import com.extjs.gxt.ui.client.Style.Scroll;
    import com.extjs.gxt.ui.client.util.Margins;
    import com.extjs.gxt.ui.client.widget.ContentPanel;
    import com.extjs.gxt.ui.client.widget.button.Button;
    import com.extjs.gxt.ui.client.widget.LayoutContainer;
    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.Viewport;
    
    /**
     * Entry point classes define <code>onModuleLoad()</code>.
     */
    public class MyViewer implements EntryPoint {
        public void onModuleLoad() {
            Viewport viewport = new Viewport();
            final BorderLayout layout = new BorderLayout();
    
            viewport.setLayout(layout);
            viewport.setLayoutOnChange(true);
            viewport.setMonitorWindowResize(true);
            viewport.setBorders(true);
    
            LayoutContainer container = new LayoutContainer();
            container.setLayoutOnChange(true);
            container.setMonitorWindowResize(true);
            container.setBorders(true);
    
            viewport.setStyleAttribute("padding", "10px");
    
            ContentPanel north = new ContentPanel();
            ContentPanel west = new ContentPanel();
            ContentPanel center = new ContentPanel();
            center.setHeading("BorderLayout Example");
            center.setScrollMode(Scroll.AUTOX);
    
            FlexTable table = new FlexTable();
            table.getElement().getStyle().setProperty("margin", "10px");
            table.setCellSpacing(8);
            table.setCellPadding(4);
    
            for (int i = 0; i < LayoutRegion.values().length; i++) {
                final LayoutRegion reg = LayoutRegion.values()[i];
                
                if (reg == LayoutRegion.CENTER) {
                    continue;
                }
                SelectionListener<ButtonEvent> sl = new SelectionListener<ButtonEvent>() {
    
                    @Override
                    public void componentSelected(ButtonEvent ce) {
                        String txt = ce.getButton().getText();
    
                        if (txt.equals("Expand")) {
                            layout.expand(reg);
                        } else if (txt.equals("Collapse")) {
                            layout.collapse(reg);
                        } else if (txt.equals("Show")) {
                            layout.show(reg);
                        } else {
                            layout.hide(reg);
                        }
                    }
                };
                table.setHTML(i, 0, "<div style='font-size: 12px; width: 100px'>" + reg.name() + ":</span>");
                table.setWidget(i, 1, new Button("Expand", sl));
                table.setWidget(i, 2, new Button("Collapse", sl));
                table.setWidget(i, 3, new Button("Show", sl));
                table.setWidget(i, 4, new Button("Hide", sl));
            }
            center.add(table);
    
            ContentPanel east = new ContentPanel();
            ContentPanel south = new ContentPanel();
    
            BorderLayoutData northData = new BorderLayoutData(LayoutRegion.NORTH, 100);
            northData.setCollapsible(true);
            northData.setFloatable(true);
            northData.setHideCollapseTool(true);
            northData.setSplit(true);
            northData.setMargins(new Margins(0, 0, 5, 0));
    
            BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, 150);
            westData.setSplit(true);
            westData.setCollapsible(true);
            westData.setMargins(new Margins(0,5,0,0));
    
            BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
            centerData.setMargins(new Margins(0));
    
            BorderLayoutData eastData = new BorderLayoutData(LayoutRegion.EAST, 150);
            eastData.setSplit(true);
            eastData.setCollapsible(true);
            eastData.setMargins(new Margins(0,0,0,5));
    
            BorderLayoutData southData = new BorderLayoutData(LayoutRegion.SOUTH, 100);
            southData.setSplit(true);
            southData.setCollapsible(true);
            southData.setFloatable(true);
            southData.setMargins(new Margins(5, 0, 0, 0));
    
            container.add(north, northData);
            container.add(west, westData);
            container.add(center, centerData);
            container.add(east, eastData);
            container.add(south, southData);
    
            viewport.add(container);
            RootPanel.get().add(viewport);
        }
    }

  2. #2
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,966
    Vote Rating
    130
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    Your container where you add multiply widgets does not have the borderlayout. I modified your code:
    Code:
    class MyViewer implements EntryPoint {
      public void onModuleLoad() {
        Viewport viewport = new Viewport();
        final BorderLayout layout = new BorderLayout();
    
        viewport.setLayout(new FitLayout());
        viewport.setBorders(true);
    
        LayoutContainer container = new LayoutContainer();
        container.setLayout(layout);
        container.setBorders(true);
    
        viewport.setStyleAttribute("padding", "10px");
    
        ContentPanel north = new ContentPanel();
        ContentPanel west = new ContentPanel();
        ContentPanel center = new ContentPanel();
        center.setHeading("BorderLayout Example");
        center.setScrollMode(Scroll.AUTOX);
    
        FlexTable table = new FlexTable();
        table.getElement().getStyle().setProperty("margin", "10px");
        table.setCellSpacing(8);
        table.setCellPadding(4);
    
        for (int i = 0; i < LayoutRegion.values().length; i++) {
          final LayoutRegion reg = LayoutRegion.values()[i];
    
          if (reg == LayoutRegion.CENTER) {
            continue;
          }
          SelectionListener<ButtonEvent> sl = new SelectionListener<ButtonEvent>() {
    
            @Override
            public void componentSelected(ButtonEvent ce) {
              String txt = ce.getButton().getText();
    
              if (txt.equals("Expand")) {
                layout.expand(reg);
              } else if (txt.equals("Collapse")) {
                layout.collapse(reg);
              } else if (txt.equals("Show")) {
                layout.show(reg);
              } else {
                layout.hide(reg);
              }
            }
          };
          table.setHTML(i, 0, "<div style='font-size: 12px; width: 100px'>" + reg.name() + ":</span>");
          table.setWidget(i, 1, new Button("Expand", sl));
          table.setWidget(i, 2, new Button("Collapse", sl));
          table.setWidget(i, 3, new Button("Show", sl));
          table.setWidget(i, 4, new Button("Hide", sl));
        }
        center.add(table);
    
        ContentPanel east = new ContentPanel();
        ContentPanel south = new ContentPanel();
    
        BorderLayoutData northData = new BorderLayoutData(LayoutRegion.NORTH, 100);
        northData.setCollapsible(true);
        northData.setFloatable(true);
        northData.setHideCollapseTool(true);
        northData.setSplit(true);
        northData.setMargins(new Margins(0, 0, 5, 0));
    
        BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, 150);
        westData.setSplit(true);
        westData.setCollapsible(true);
        westData.setMargins(new Margins(0, 5, 0, 0));
    
        BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
        centerData.setMargins(new Margins(0));
    
        BorderLayoutData eastData = new BorderLayoutData(LayoutRegion.EAST, 150);
        eastData.setSplit(true);
        eastData.setCollapsible(true);
        eastData.setMargins(new Margins(0, 0, 0, 5));
    
        BorderLayoutData southData = new BorderLayoutData(LayoutRegion.SOUTH, 100);
        southData.setSplit(true);
        southData.setCollapsible(true);
        southData.setFloatable(true);
        southData.setMargins(new Margins(5, 0, 0, 0));
    
        container.add(north, northData);
        container.add(west, westData);
        container.add(center, centerData);
        container.add(east, eastData);
        container.add(south, southData);
    
        viewport.add(container);
        RootPanel.get().add(viewport);
      }
    }

  3. #3
    Sencha User
    Join Date
    Oct 2010
    Location
    Seattle
    Posts
    25
    Vote Rating
    0
    SuperSloMo is on a distinguished road

      0  

    Default Help with BorderLayout example

    Help with BorderLayout example


    I'm not sure why, but that change didn't work for me. I am using a FireFox browser, and when I made the changes you provided, it displayed the "BorderLayout Example" label and "North:" label and buttons at the bottom of the page. The other lines are probably below the north one, below the bottom of the page. There are no north, south, east or west panes, and the buttons don't change the display.

  4. #4
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,966
    Vote Rating
    130
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    This is how it looks for me. I jsut run the code i gave you again:


  5. #5
    Sencha User
    Join Date
    Oct 2010
    Location
    Seattle
    Posts
    25
    Vote Rating
    0
    SuperSloMo is on a distinguished road

      0  

    Default Help with BorderLayout example

    Help with BorderLayout example


    Is there anything in the file outside of the onModuleLoad function that might be needed to make the code work? I'm not getting anything but the center panel, and it's down at the bottom left part of the page with most of the rows below the bottom of the page.

  6. #6
    Sencha User
    Join Date
    Oct 2010
    Location
    Seattle
    Posts
    25
    Vote Rating
    0
    SuperSloMo is on a distinguished road

      0  

    Default Last remaining problem solved

    Last remaining problem solved


    It turns out that I also didn't have the gxt-all.css file in the right place and it wasn't being found. Now my display looks right. Thanks very much for your help.

Similar Threads

  1. Getting started
    By mkn in forum Ext GWT: Help & Discussion (1.x)
    Replies: 1
    Last Post: 4 Jun 2008, 4:34 AM
  2. getting started
    By mcdavis941 in forum Ext 1.x: Help & Discussion
    Replies: 12
    Last Post: 23 Nov 2006, 3:29 AM
  3. Could not get started.
    By harunhasdal in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 14 Nov 2006, 5:13 AM
  4. getting started
    By sam_sam in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 27 Oct 2006, 9:20 AM
  5. A little help getting started...
    By rgoff in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 25 Sep 2006, 3:52 PM

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar