PDA

View Full Version : Border layout example not working



hdave
23 Jul 2010, 6:07 AM
Brand new Ext-GWT developer here. I've successfully tried 4 or 5 of the gallery examples from within my project as a way to get started coding quickly. However, for some reason the border layout example doesn't work in my project (NOTE: the example works, but the code in my project doesn't work):

http://www.sencha.com/examples/explorer.html#borderlayout

It looks completely scrambled within the browser window (FF 3.6.6). I have no other code in this little sample project than what was provided. My code to create the border layout example (e.g. my GWT entry point) is this:


public class Application
implements EntryPoint {

/**
* This is the entry point method.
*/
public void onModuleLoad() {
BorderLayoutExample g = new BorderLayoutExample();

RootLayoutPanel.get().add(g);
g.layout();
}
}

sven
23 Jul 2010, 7:03 AM
You are not sizing your container.

hdave
23 Jul 2010, 12:39 PM
Thanks -- put the border layout into a Viewport that uses a FitLayout and it all works marvelously.

IT100
25 Jul 2010, 1:34 AM
copy paste an example please?
regars,
C

hdave
27 Jul 2010, 7:40 PM
final Viewport v = new Viewport();
v.setLayout(new FitLayout());

LayoutContainer mf = new LayoutContainer();
mf.setLayout(new BorderLayout());
v.add(mf);

RootLayoutPanel.get().add(v);


Hope this helps....

goodloic
19 Jan 2011, 11:18 AM
At First, I thank you for the help you'll give me

I'm studying computer science last year and I started working with Ext GWT.

I try to use BorderLayout. Here is my code:
Code:


import com.extjs.gxt.ui.client.GXT;
import com.extjs.gxt.ui.client.Style;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.util.Theme;
import com.extjs.gxt.ui.client.util.ThemeManager;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
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.core.client.GWT;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import ext.ux.theme.olive.client.Olive;


/**
* Created by loic
* Date : 12 janv. 2011
* Time : 15:42:02
*/
public class Bmailing implements EntryPoint {


public void onModuleLoad() {

final Viewport v = new Viewport();
v.setLayout(new FitLayout());
LayoutContainer mf = new LayoutContainer();
BorderLayout b = new BorderLayout();

ContentPanel north = new ContentPanel();
north.setHeading("north");
BorderLayoutData northData = new BorderLayoutData(Style.LayoutRegion.NORTH, 100);
northData.setCollapsible(true);
northData.setFloatable(true);
northData.setHideCollapseTool(true);
northData.setSplit(true);
northData.setMargins(new Margins(0, 0, 5, 0));

ContentPanel west = new ContentPanel();
west.setHeading("west");
BorderLayoutData westData = new BorderLayoutData(Style.LayoutRegion.WEST, 150);
westData.setSplit(true);
westData.setCollapsible(true);
westData.setMargins(new Margins(0, 5, 0, 0));

ContentPanel center = new ContentPanel();
center.setHeading("center");
BorderLayoutData centerData = new BorderLayoutData(Style.LayoutRegion.CENTER);
centerData.setMargins(new Margins(0));

ContentPanel east = new ContentPanel();
east.setHeading("east");
BorderLayoutData eastData = new BorderLayoutData(Style.LayoutRegion.EAST, 150);
eastData.setSplit(true);
eastData.setCollapsible(true);
eastData.setMargins(new Margins(0, 0, 0, 5));

ContentPanel south = new ContentPanel();
south.setHeading("south");
BorderLayoutData southData = new BorderLayoutData(Style.LayoutRegion.SOUTH, 100);
southData.setSplit(true);
southData.setCollapsible(true);
southData.setFloatable(true);
southData.setMargins(new Margins(5, 0, 0, 0));

mf.add(north, northData);
mf.add(west, westData);
mf.add(center, centerData);
mf.add(east, eastData);
mf.add(south, southData);

mf.setLayout(b);
v.add(mf);
RootLayoutPanel.get().add(v);


}


}Most of the code come from http://www.sencha.com/examples/explorer.html#borderlayout but the result is not the same.

May you help me ?
Thank you for your answer.