View Full Version : odd wrap in TreePanel

4 Aug 2009, 2:40 AM
Hi, I'm trying to run this example:

Everything works fine except scroll bar on the bottom... ther is no scroll bar when tree is expanded. So I see text from one leaf wrapped in two rows.

There is code:

package somepackage.client;

import com.extjs.gxt.ui.client.data.BaseTreeModel;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.store.TreeStore;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.button.ButtonBar;
import com.extjs.gxt.ui.client.widget.layout.FlowData;
import com.extjs.gxt.ui.client.widget.treepanel.TreePanel;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.RootPanel;

import java.io.Serializable;

public class Test implements EntryPoint {
public void onModuleLoad() {
RootPanel root = RootPanel.get();
root.add(new BasicTreePanelExample());

// NEXT IS COPY-PASTE FROM SAMPLES /*----------------------------------------------------------------------------------------------------*/

private class BasicTreePanelExample extends LayoutContainer {
protected void onRender(Element parent, int pos) {
super.onRender(parent, pos);
Folder model = getTreeModel();
TreeStore<ModelData> store = new TreeStore<ModelData>();
store.add(model.getChildren(), true);

final TreePanel<ModelData> tree = new TreePanel<ModelData>(store);

// change from 250 to 150

ButtonBar buttonBar = new ButtonBar();
buttonBar.add(new Button("Expand All", new SelectionListener<ButtonEvent>() {
public void componentSelected(ButtonEvent ce) {
buttonBar.add(new Button("Collapse All", new SelectionListener<ButtonEvent>() {
public void componentSelected(ButtonEvent ce) {
add(buttonBar, new FlowData(10));
add(tree, new FlowData(10));

private Folder getTreeModel() {
Folder[] folders = new Folder[]{
new Folder("Beethoven",
new Folder[]{
new Folder("Sonatas", new Music[]{
new Music("Sonata in A Minor", "Beethoven", "Sonatas"),
new Music("Sonata in F Major", "Beethoven", "Sonatas"),}),
new Folder("Concertos", new Music[]{
new Music("No. 1 - C", "Beethoven", "Concertos"),
new Music("No. 2 - B-Flat Major", "Beethoven", "Concertos"),
new Music("No. 3 - C Minor", "Beethoven", "Concertos"),
new Music("No. 4 - G Major", "Beethoven", "Concertos"),
new Music("No. 5 - E-Flat Major", "Beethoven", "Concertos"),}),
new Folder("Symphonies", new Music[]{
new Music("No. 1 - C Major", "Beethoven", "Symphonies"),
new Music("No. 2 - D Major", "Beethoven", "Symphonies"),
new Music("No. 9 - D Minor", "Beethoven", "Symphonies"),})})};
Folder root = new Folder("root");
for (Folder folder : folders) {
return root;

private class Folder extends BaseTreeModel implements Serializable {
private int ID = 0;

public Folder() {
set("id", ID++);
public Folder(String name) {
set("id", ID++);
set("name", name);
public Folder(String name, BaseTreeModel[] children) {
for (BaseTreeModel aChildren : children) {
public Integer getId() {
return (Integer) get("id");
public String getName() {
return (String) get("name");
public String toString() {
return getName();

private class Music extends BaseTreeModel {
public Music() {
public Music(String name) {
set("name", name);
public Music(String name, String author, String genre) {
set("name", name);
set("author", author);
set("genre", genre);
public String getName() {
return (String) get("name");
public String getAuthor() {
return (String) get("author");
public String getGenre() {
return (String) get("genre");
public String toString() {
return getName();

I'm flying on gxt-2.0, gwt-1.7.0.

Does this code works ok with this configuration or I'm missing some important line?


4 Aug 2009, 2:42 AM
You also have this problem in the example page? If so, in which browser?

Also note that GWT 1.7 is not fully supported with GXT2. You will need to update to GXT 2.0.1. Dont forget to update your css files than too.

4 Aug 2009, 6:03 AM
In example page everything is OK in all browsers I tried.
Problem appears when I copy paste source code from "TabItem Source Code" into my Eclipse or Idea.
Text is wraped in hosted mode as well as in compiled output in IE, FireFox, Chrome, Opera, Safari. In NestScape there are tollbars (horizontal and vertical) but text in the tree is still wraped.

With GXT-2.0.1. no change.
css files updated.

4 Aug 2009, 6:58 AM
This sounds more like a help request than. Moving this to help forum so more people see it.

Try to inspect the element with firebug why it actually wraps. There are css rules in place that forbids this.

6 Aug 2009, 6:37 AM
see attached screenshots

with the original values from your code snippet i do not see any scrollbars and not leaf wrapping.

but if i extend it one line then it get scrollbars - but also no wrapping.

// old
new Music("No. 5 - E-Flat Major", "Beethoven", "Concertos"),}),
// new
new Music("No. 5 - E-Flat Major xxxxxxxxxx xxxxxxx xxxxxxx", "Beethoven", "Concertos"),}),

7 Aug 2009, 1:32 AM
Hi, Thank you.
It's workning ok now, but I dont know what I did.
This issue started becouse I had gxt-all.css from mile stone 2.
It was same with new ones, but after some restarts it was ok. I'm almost sure, I did nothing. :-D

Everything is fain now.
Thans Lukas