View Full Version : TreeGrid columns content overlap when viewed in IE6

22 Dec 2011, 2:04 AM
Detailed description of the problem:
Column contents in TreeGrid is not wrapped if it doesn't fit the column width. Instead it overlaps with contents of other columns(see attached screenshots).

GXT version: 2.2.3
GWT version 2.2.0

Appears in web mode. I haven't tested in DevMode
Browser: IE6 SP1
Operating System: WinXP SP3

Sample code:

package com.test.client;

import java.util.Arrays;

import com.extjs.gxt.ui.client.data.BaseTreeModel;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.store.TreeStore;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.treegrid.TreeGrid;
import com.extjs.gxt.ui.client.widget.treegrid.TreeGridCellRenderer;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class TreeGridTest implements EntryPoint {

public void onModuleLoad() {
LayoutContainer layoutContainer = new LayoutContainer(new FitLayout());
layoutContainer.setSize("200px", "200px");

TreeGrid<ModelData> treeGrid = createTreeGrid();


private TreeGrid<ModelData> createTreeGrid() {
final TreeStore<ModelData> store = new TreeStore<ModelData>();

TreeGrid<ModelData> tree = new TreeGrid<ModelData>(store, getColumnModel());




return tree;

private ColumnModel getColumnModel() {

ColumnConfig display = new ColumnConfig("name", "Name", 100);
display.setRenderer(new TreeGridCellRenderer<ModelData>());

ColumnConfig number = new ColumnConfig("number", "Number", 50);

ColumnConfig version = new ColumnConfig("version", "Version", 50);

return new ColumnModel(Arrays.asList(display, number, version));

private void populateStore(TreeStore<ModelData> treeStore) {
ModelData root = new BaseTreeModel();
root.set("name", "Very very very long name");
root.set("number", "32413241");
root.set("version", "0");

ModelData child1 = new BaseTreeModel();
child1.set("name", "Child element 1");
child1.set("number", "12323423");
child1.set("version", "1");

ModelData child2 = new BaseTreeModel();
child2.set("name", "Child element 2");
child2.set("number", "5323452345");
child2.set("version", "0");

treeStore.add(root, true);
treeStore.add(root, Arrays.asList(child1, child2), true);


25 Dec 2011, 10:39 PM
Maybe someone could suggest a workaround or something?

26 Dec 2011, 3:47 AM
You can set the overflow to hidden on the this relevant element for now. This will be fixed in one of the upcomming releases and it an already known issue.

26 Dec 2011, 6:22 AM
I ended up adding "width:100%; overflow:hidden;" to .x-tree3-el. Seems to work fine for me.

Thanks for your help.

5 Feb 2012, 12:46 AM
There is also an problem in Chrome(18.0.1025.3 dev). I attached the image.