MeMyself
3 Dec 2008, 2:23 AM
Hi,
We are still just playing around with GXT and thus far everything points to a "let's get some licenses for our forthcomming development". However, I found a strange issue, which is probably caused by an issue between the keyboard and chair. Maybe it is a bit more sinister than that...
Effectively, I'm creating a BorderLayout - north for logo and button bar (another BorderLayout), west for navigation (Accordion + Tree) and center for the actual meat. So, far, so good. I'm specifying sizes for the header (logo is only 45px high) and everything seems ok. Well, it is ok, until I start to add stuff to my navigation tree - when I hit 4 items (guilty code snipped indicated) the north logo bar thingy starts expanding to 245 instead of the value I set it at - 45.
Took a while for me to locate the offending lines, and it is indeed the tree. Add 4, and it shows too large, at 3 everything is ok. Very weird.
Code:
package test.app.client;
import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.form.LabelField;
import com.extjs.gxt.ui.client.widget.layout.AccordionLayout;
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.tree.Tree;
import com.extjs.gxt.ui.client.widget.tree.TreeItem;
import com.google.gwt.user.client.ui.Image;
public class LayoutMain extends LayoutContainer {
public LayoutMain() {
setLayout(new BorderLayout());
createHeader();
createNavigation();
createContent();
setSize("100%", "100%");
setMonitorWindowResize(true);
}
private void createHeader() {
final LayoutContainer north = new LayoutContainer(new BorderLayout());
final BorderLayoutData northLayout = new BorderLayoutData(LayoutRegion.NORTH, 45);
northLayout.setCollapsible(false);
northLayout.setFloatable(false);
northLayout.setSplit(false);
northLayout.setMargins(new Margins(0));
final BorderLayoutData logoLayout = new BorderLayoutData(LayoutRegion.EAST, 176);
logoLayout.setCollapsible(false);
logoLayout.setFloatable(false);
logoLayout.setSplit(false);
logoLayout.setMargins(new Margins(0));
//final Image logo = new Image("img/logo.gif");
//north.add(logo, logoLayout);
add(north, northLayout);
}
private void createNavigation() {
final ContentPanel west = new ContentPanel(new AccordionLayout());
final BorderLayoutData westLayout = new BorderLayoutData(LayoutRegion.WEST, 250);
westLayout.setCollapsible(true);
westLayout.setFloatable(false);
westLayout.setSplit(true);
westLayout.setMargins(new Margins(0));
ContentPanel cp = new ContentPanel();
cp.setHeading("Shortcuts");
final Tree shortcutTree = new Tree();
// comment out any of these (3 nodes) and the display is fine
shortcutTree.getRootItem().add(newTreeItem("D", "tree-icon-d"));
shortcutTree.getRootItem().add(newTreeItem("A", "tree-icon-a"));
shortcutTree.getRootItem().add(newTreeItem("M", "tree-icon-t"));
shortcutTree.getRootItem().add(newTreeItem("R", "tree-icon-r"));
cp.add(shortcutTree);
west.add(cp);
cp = new ContentPanel();
cp.setHeading("Methodologies");
cp.add(new LabelField("Some Methodologies"));
west.add(cp);
cp = new ContentPanel();
cp.setHeading("Risks");
cp.add(new LabelField("Some Risks"));
west.add(cp);
cp = new ContentPanel();
cp.setHeading("Controls");
cp.add(new LabelField("Some Controls"));
west.add(cp);
add(west, westLayout);
}
private void createContent() {
final ContentPanel center = new ContentPanel();
center.add(new LabelField("This is just some placeholder text until I have something better to display"));
final BorderLayoutData centerLayout = new BorderLayoutData(LayoutRegion.CENTER);
centerLayout.setCollapsible(false);
centerLayout.setFloatable(false);
centerLayout.setSplit(false);
centerLayout.setMargins(new Margins(0));
add(center, centerLayout);
}
private TreeItem newTreeItem(String text, String icon) {
TreeItem item = new TreeItem(text);
item.setIconStyle(icon);
return item;
}
}
Hosted screenshot of a working one with 3 items and a "broken" one with 4 items.
Correct:
10801
Broken:
10802
We are still just playing around with GXT and thus far everything points to a "let's get some licenses for our forthcomming development". However, I found a strange issue, which is probably caused by an issue between the keyboard and chair. Maybe it is a bit more sinister than that...
Effectively, I'm creating a BorderLayout - north for logo and button bar (another BorderLayout), west for navigation (Accordion + Tree) and center for the actual meat. So, far, so good. I'm specifying sizes for the header (logo is only 45px high) and everything seems ok. Well, it is ok, until I start to add stuff to my navigation tree - when I hit 4 items (guilty code snipped indicated) the north logo bar thingy starts expanding to 245 instead of the value I set it at - 45.
Took a while for me to locate the offending lines, and it is indeed the tree. Add 4, and it shows too large, at 3 everything is ok. Very weird.
Code:
package test.app.client;
import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.form.LabelField;
import com.extjs.gxt.ui.client.widget.layout.AccordionLayout;
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.tree.Tree;
import com.extjs.gxt.ui.client.widget.tree.TreeItem;
import com.google.gwt.user.client.ui.Image;
public class LayoutMain extends LayoutContainer {
public LayoutMain() {
setLayout(new BorderLayout());
createHeader();
createNavigation();
createContent();
setSize("100%", "100%");
setMonitorWindowResize(true);
}
private void createHeader() {
final LayoutContainer north = new LayoutContainer(new BorderLayout());
final BorderLayoutData northLayout = new BorderLayoutData(LayoutRegion.NORTH, 45);
northLayout.setCollapsible(false);
northLayout.setFloatable(false);
northLayout.setSplit(false);
northLayout.setMargins(new Margins(0));
final BorderLayoutData logoLayout = new BorderLayoutData(LayoutRegion.EAST, 176);
logoLayout.setCollapsible(false);
logoLayout.setFloatable(false);
logoLayout.setSplit(false);
logoLayout.setMargins(new Margins(0));
//final Image logo = new Image("img/logo.gif");
//north.add(logo, logoLayout);
add(north, northLayout);
}
private void createNavigation() {
final ContentPanel west = new ContentPanel(new AccordionLayout());
final BorderLayoutData westLayout = new BorderLayoutData(LayoutRegion.WEST, 250);
westLayout.setCollapsible(true);
westLayout.setFloatable(false);
westLayout.setSplit(true);
westLayout.setMargins(new Margins(0));
ContentPanel cp = new ContentPanel();
cp.setHeading("Shortcuts");
final Tree shortcutTree = new Tree();
// comment out any of these (3 nodes) and the display is fine
shortcutTree.getRootItem().add(newTreeItem("D", "tree-icon-d"));
shortcutTree.getRootItem().add(newTreeItem("A", "tree-icon-a"));
shortcutTree.getRootItem().add(newTreeItem("M", "tree-icon-t"));
shortcutTree.getRootItem().add(newTreeItem("R", "tree-icon-r"));
cp.add(shortcutTree);
west.add(cp);
cp = new ContentPanel();
cp.setHeading("Methodologies");
cp.add(new LabelField("Some Methodologies"));
west.add(cp);
cp = new ContentPanel();
cp.setHeading("Risks");
cp.add(new LabelField("Some Risks"));
west.add(cp);
cp = new ContentPanel();
cp.setHeading("Controls");
cp.add(new LabelField("Some Controls"));
west.add(cp);
add(west, westLayout);
}
private void createContent() {
final ContentPanel center = new ContentPanel();
center.add(new LabelField("This is just some placeholder text until I have something better to display"));
final BorderLayoutData centerLayout = new BorderLayoutData(LayoutRegion.CENTER);
centerLayout.setCollapsible(false);
centerLayout.setFloatable(false);
centerLayout.setSplit(false);
centerLayout.setMargins(new Margins(0));
add(center, centerLayout);
}
private TreeItem newTreeItem(String text, String icon) {
TreeItem item = new TreeItem(text);
item.setIconStyle(icon);
return item;
}
}
Hosted screenshot of a working one with 3 items and a "broken" one with 4 items.
Correct:
10801
Broken:
10802