PDA

View Full Version : Last nodes in TreePanel not showing in Firefox and Chrome



matling
17 Dec 2010, 4:06 AM
Hello,

I am using a TreePanel inside a LayoutContainer and in Firefox and Chrome the last few nodes in the tree are not shown:

23867

In Internet Explorer 8 the nodes are shown correctly:

23868


When inspecting the generated HTML, I can see that the nodes that are not shown are generated like this:


<div class="x-tree3-node" id="group-select_x-auto-496">
<div aria-level="2" role="treeitem" id="group-select__group-select_x-auto-496" class="x-tree3-el "></div>
</div>


The nodes that are showing are generated like this:



<div class="x-tree3-node" id="group-select_x-auto-491">
<div aria-level="2" role="treeitem" id="group-select__group-select_x-auto-491" class="x-tree3-el">
<img style="height: 18px; width: 18px;"
src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
class="gwt-Image x-tree3-node-joint" style="width: 16px;">
<img border="0" style="width: 16px; height: 16px; background:
url(&quot;http://127.0.0.1:8080/weboffice/weboffice/C43A8DC1E50D698B543BF589D0244ECC.cache.png&quot;)
no-repeat scroll -18px 0px transparent;" src="http://127.0.0.1:8080/weboffice/weboffice/clear.cache.gif"
class=" x-tree3-node-check"><img border="0" style="width: 16px; height: 16px; background:
url(&quot;http://127.0.0.1:8080/weboffice/weboffice/C43A8DC1E50D698B543BF589D0244ECC.cache.png&quot;)
no-repeat scroll -558px 0px transparent;" src="http://127.0.0.1:8080/weboffice/weboffice/clear.cache.gif"
class=" x-tree3-node-icon">
<span class="x-tree3-node-text">sdfsdf</span>
</div>
</div>


Any ideas why this is happening? I am using version 2.1.3.

sven
17 Dec 2010, 4:17 AM
Looks like the nodes get cleared out. I cannot reproduce this with the official examples. Can you please post a fully working testcase implementing EntryPoint?

matling
20 Dec 2010, 2:38 AM
I am not able to reproduce this in a simple example, it only shows up in my actual system (too complex to post). So I guess there is something in my system that makes this happen, making it hard for you to help me with this.

matling
21 Dec 2010, 4:23 AM
Ok, I managed to create an example that reproduces this. However, with this example the nodes are not shown in Internet Explorer either, so maybe I'm doing something wrong, sorry if that is the case. I'm pasting just the source code here, let me know if you want all files in a zip.



package test.client;

import com.extjs.gxt.ui.client.GXT;
import com.extjs.gxt.ui.client.Style.SelectionMode;
import com.extjs.gxt.ui.client.data.BaseModel;
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.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.treepanel.TreePanel;
import com.extjs.gxt.ui.client.widget.treepanel.TreePanel.CheckCascade;
import com.extjs.gxt.ui.client.widget.treepanel.TreePanel.CheckNodes;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.rpc.IsSerializable;
import com.google.gwt.user.client.ui.RootPanel;

public class TreePanelTest implements EntryPoint {
public void onModuleLoad() {
RootPanel.get().add(new TreePanelContainer());
}
}

class Group extends BaseModel {

public Group(Integer parentId, Integer id, String name){
set("parentId", parentId);
set("id", id);
set("name", name);
}

public void setName(String name) {
set("name", name);
}
public String getName() {
return get("name");
}

public void setId(Integer id) {
set("id", id);
}

public Integer getId() {
return get("id");
}

public void setParentId(Integer parentId) {
set("parentId", parentId);
}

public Integer getParentId() {
return get("parentId");
}
}

class GroupTreeModel extends BaseTreeModel {

public GroupTreeModel(String name, Integer id) {
set("id", id);
set("name", name);
}

public Integer getId() {
return (Integer) get("id");
}

public String getName() {
return (String) get("name");
}

public String toString() {
return getName();
}

public void setName(String name) {
set("name", name);
}

@Override
public boolean equals(Object o){
if(o instanceof GroupTreeModel){
return(((GroupTreeModel) o).getId()!=null && ((GroupTreeModel) o).getId().equals(getId()));
} else {
return false;
}
}
}

class TreePanelContainer extends LayoutContainer {
private TreePanel<ModelData> treePanel;
private TreeStore<ModelData> groupTreeStore;

public TreePanelContainer() {
setLayout(new FitLayout());
groupTreeStore = new TreeStore<ModelData>();
treePanel = new TreePanel<ModelData>(groupTreeStore);
treePanel.getStyle().setLeafIcon(GXT.IMAGES.tree_folder_closed());

treePanel.setBorders(true);
treePanel.setHeight(200);
treePanel.setWidth(300);
treePanel.setStyleAttribute("background", "white");
treePanel.setDisplayProperty("name");

treePanel.getSelectionModel().setSelectionMode(SelectionMode.SIMPLE);
treePanel.setCheckable(true);
treePanel.setCheckStyle(CheckCascade.NONE);
treePanel.setCheckNodes(CheckNodes.BOTH);

Group root = new Group(0, 1, "Root");

Group group1 = new Group(1, 2, "Node1");
Group group2 = new Group(1, 3, "Node2");
Group group3 = new Group(1, 4, "Node3");
Group group4 = new Group(1, 5, "Node4");
Group group5 = new Group(1, 6, "Node5");
Group group6 = new Group(1, 7, "Node6");
Group group7 = new Group(1, 8, "Node7");
Group group8 = new Group(1, 9, "Node8");
Group group9 = new Group(1, 10, "Node9");
Group group10 = new Group(1, 11, "Node10");
Group group11 = new Group(1, 12, "Node11");
Group group12 = new Group(1, 13, "Node12");
Group group13 = new Group(1, 14, "Node13");
Group group14 = new Group(1, 15, "Node14");
Group group15 = new Group(1, 16, "Node15");
Group group16 = new Group(1, 17, "Node16");
Group group17 = new Group(1, 18, "Node17");
Group group18 = new Group(1, 19, "Node18");
Group group19 = new Group(1, 20, "Node19");
Group group20 = new Group(1, 21, "Node20");
Group group21 = new Group(1, 22, "Node21");
Group group22 = new Group(1, 23, "Node22");
Group group23 = new Group(1, 24, "Node23");
Group group24 = new Group(1, 25, "Node24");
Group group25 = new Group(1, 26, "Node25");
Group group26 = new Group(1, 27, "Node26");
Group group27 = new Group(1, 28, "Node27");
Group group28 = new Group(1, 29, "Node28");
Group group29 = new Group(1, 30, "Node29");
Group group30 = new Group(1, 31, "Node30");
Group group31 = new Group(1, 32, "Node31");
Group group32 = new Group(1, 33, "Node32");
Group group33 = new Group(1, 34, "Node33");
Group group34 = new Group(1, 35, "Node34");

GroupTreeModel rootModel = new GroupTreeModel(root.getName(), root.getId());

GroupTreeModel model1 = new GroupTreeModel(group1.getName(), group1.getId());
GroupTreeModel model2 = new GroupTreeModel(group2.getName(), group2.getId());
GroupTreeModel model3 = new GroupTreeModel(group3.getName(), group3.getId());
GroupTreeModel model4 = new GroupTreeModel(group4.getName(), group4.getId());
GroupTreeModel model5 = new GroupTreeModel(group5.getName(), group5.getId());
GroupTreeModel model6 = new GroupTreeModel(group6.getName(), group6.getId());
GroupTreeModel model7 = new GroupTreeModel(group7.getName(), group7.getId());
GroupTreeModel model8 = new GroupTreeModel(group8.getName(), group8.getId());
GroupTreeModel model9 = new GroupTreeModel(group9.getName(), group9.getId());
GroupTreeModel model10 = new GroupTreeModel(group10.getName(), group10.getId());
GroupTreeModel model11 = new GroupTreeModel(group11.getName(), group11.getId());
GroupTreeModel model12 = new GroupTreeModel(group12.getName(), group12.getId());
GroupTreeModel model13 = new GroupTreeModel(group13.getName(), group13.getId());
GroupTreeModel model14 = new GroupTreeModel(group14.getName(), group14.getId());
GroupTreeModel model15 = new GroupTreeModel(group15.getName(), group15.getId());
GroupTreeModel model16 = new GroupTreeModel(group16.getName(), group16.getId());
GroupTreeModel model17 = new GroupTreeModel(group17.getName(), group17.getId());
GroupTreeModel model18 = new GroupTreeModel(group18.getName(), group18.getId());
GroupTreeModel model19 = new GroupTreeModel(group19.getName(), group19.getId());
GroupTreeModel model20 = new GroupTreeModel(group20.getName(), group20.getId());
GroupTreeModel model21 = new GroupTreeModel(group21.getName(), group21.getId());
GroupTreeModel model22 = new GroupTreeModel(group22.getName(), group22.getId());
GroupTreeModel model23 = new GroupTreeModel(group23.getName(), group23.getId());
GroupTreeModel model24 = new GroupTreeModel(group24.getName(), group24.getId());
GroupTreeModel model25 = new GroupTreeModel(group25.getName(), group25.getId());
GroupTreeModel model26 = new GroupTreeModel(group26.getName(), group26.getId());
GroupTreeModel model27 = new GroupTreeModel(group27.getName(), group27.getId());
GroupTreeModel model28 = new GroupTreeModel(group28.getName(), group28.getId());
GroupTreeModel model29 = new GroupTreeModel(group29.getName(), group29.getId());
GroupTreeModel model30 = new GroupTreeModel(group30.getName(), group30.getId());
GroupTreeModel model31 = new GroupTreeModel(group31.getName(), group31.getId());
GroupTreeModel model32 = new GroupTreeModel(group32.getName(), group32.getId());
GroupTreeModel model33 = new GroupTreeModel(group33.getName(), group33.getId());
GroupTreeModel model34 = new GroupTreeModel(group34.getName(), group34.getId());

rootModel.add(model1);
rootModel.add(model2);
rootModel.add(model3);
rootModel.add(model4);
rootModel.add(model5);
rootModel.add(model6);
rootModel.add(model7);
rootModel.add(model8);
rootModel.add(model9);
rootModel.add(model10);
rootModel.add(model11);
rootModel.add(model12);
rootModel.add(model13);
rootModel.add(model14);
rootModel.add(model15);
rootModel.add(model16);
rootModel.add(model17);
rootModel.add(model18);
rootModel.add(model19);
rootModel.add(model20);
rootModel.add(model21);
rootModel.add(model22);
rootModel.add(model23);
rootModel.add(model24);
rootModel.add(model25);
rootModel.add(model26);
rootModel.add(model27);
rootModel.add(model28);
rootModel.add(model29);
rootModel.add(model30);
rootModel.add(model31);
rootModel.add(model32);
rootModel.add(model33);
rootModel.add(model34);

groupTreeStore.add(rootModel, true);
add(treePanel);
}
}

sven
21 Dec 2010, 4:39 AM
There was a small issue in your code. The container was not sized but used a FitLayout:


class TreePanelContainer extends LayoutContainer {
private TreePanel<ModelData> treePanel;
private TreeStore<ModelData> groupTreeStore;

public TreePanelContainer() {
setLayout(new FitLayout());
setHeight(200);
setWidth(300);
groupTreeStore = new TreeStore<ModelData>();
treePanel = new TreePanel<ModelData>(groupTreeStore);
treePanel.getStyle().setLeafIcon(GXT.IMAGES.tree_folder_closed());

treePanel.setBorders(true);

treePanel.setStyleAttribute("background", "white");
treePanel.setDisplayProperty("name");

treePanel.getSelectionModel().setSelectionMode(SelectionMode.SIMPLE);
treePanel.setCheckable(true);
treePanel.setCheckStyle(CheckCascade.NONE);
treePanel.setCheckNodes(CheckNodes.BOTH);

Group root = new Group(0, 1, "Root");

Group group1 = new Group(1, 2, "Node1");
Group group2 = new Group(1, 3, "Node2");
Group group3 = new Group(1, 4, "Node3");
Group group4 = new Group(1, 5, "Node4");
Group group5 = new Group(1, 6, "Node5");
Group group6 = new Group(1, 7, "Node6");
Group group7 = new Group(1, 8, "Node7");
Group group8 = new Group(1, 9, "Node8");
Group group9 = new Group(1, 10, "Node9");
Group group10 = new Group(1, 11, "Node10");
Group group11 = new Group(1, 12, "Node11");
Group group12 = new Group(1, 13, "Node12");
Group group13 = new Group(1, 14, "Node13");
Group group14 = new Group(1, 15, "Node14");
Group group15 = new Group(1, 16, "Node15");
Group group16 = new Group(1, 17, "Node16");
Group group17 = new Group(1, 18, "Node17");
Group group18 = new Group(1, 19, "Node18");
Group group19 = new Group(1, 20, "Node19");
Group group20 = new Group(1, 21, "Node20");
Group group21 = new Group(1, 22, "Node21");
Group group22 = new Group(1, 23, "Node22");
Group group23 = new Group(1, 24, "Node23");
Group group24 = new Group(1, 25, "Node24");
Group group25 = new Group(1, 26, "Node25");
Group group26 = new Group(1, 27, "Node26");
Group group27 = new Group(1, 28, "Node27");
Group group28 = new Group(1, 29, "Node28");
Group group29 = new Group(1, 30, "Node29");
Group group30 = new Group(1, 31, "Node30");
Group group31 = new Group(1, 32, "Node31");
Group group32 = new Group(1, 33, "Node32");
Group group33 = new Group(1, 34, "Node33");
Group group34 = new Group(1, 35, "Node34");

GroupTreeModel rootModel = new GroupTreeModel(root.getName(), root.getId());

GroupTreeModel model1 = new GroupTreeModel(group1.getName(), group1.getId());
GroupTreeModel model2 = new GroupTreeModel(group2.getName(), group2.getId());
GroupTreeModel model3 = new GroupTreeModel(group3.getName(), group3.getId());
GroupTreeModel model4 = new GroupTreeModel(group4.getName(), group4.getId());
GroupTreeModel model5 = new GroupTreeModel(group5.getName(), group5.getId());
GroupTreeModel model6 = new GroupTreeModel(group6.getName(), group6.getId());
GroupTreeModel model7 = new GroupTreeModel(group7.getName(), group7.getId());
GroupTreeModel model8 = new GroupTreeModel(group8.getName(), group8.getId());
GroupTreeModel model9 = new GroupTreeModel(group9.getName(), group9.getId());
GroupTreeModel model10 = new GroupTreeModel(group10.getName(), group10.getId());
GroupTreeModel model11 = new GroupTreeModel(group11.getName(), group11.getId());
GroupTreeModel model12 = new GroupTreeModel(group12.getName(), group12.getId());
GroupTreeModel model13 = new GroupTreeModel(group13.getName(), group13.getId());
GroupTreeModel model14 = new GroupTreeModel(group14.getName(), group14.getId());
GroupTreeModel model15 = new GroupTreeModel(group15.getName(), group15.getId());
GroupTreeModel model16 = new GroupTreeModel(group16.getName(), group16.getId());
GroupTreeModel model17 = new GroupTreeModel(group17.getName(), group17.getId());
GroupTreeModel model18 = new GroupTreeModel(group18.getName(), group18.getId());
GroupTreeModel model19 = new GroupTreeModel(group19.getName(), group19.getId());
GroupTreeModel model20 = new GroupTreeModel(group20.getName(), group20.getId());
GroupTreeModel model21 = new GroupTreeModel(group21.getName(), group21.getId());
GroupTreeModel model22 = new GroupTreeModel(group22.getName(), group22.getId());
GroupTreeModel model23 = new GroupTreeModel(group23.getName(), group23.getId());
GroupTreeModel model24 = new GroupTreeModel(group24.getName(), group24.getId());
GroupTreeModel model25 = new GroupTreeModel(group25.getName(), group25.getId());
GroupTreeModel model26 = new GroupTreeModel(group26.getName(), group26.getId());
GroupTreeModel model27 = new GroupTreeModel(group27.getName(), group27.getId());
GroupTreeModel model28 = new GroupTreeModel(group28.getName(), group28.getId());
GroupTreeModel model29 = new GroupTreeModel(group29.getName(), group29.getId());
GroupTreeModel model30 = new GroupTreeModel(group30.getName(), group30.getId());
GroupTreeModel model31 = new GroupTreeModel(group31.getName(), group31.getId());
GroupTreeModel model32 = new GroupTreeModel(group32.getName(), group32.getId());
GroupTreeModel model33 = new GroupTreeModel(group33.getName(), group33.getId());
GroupTreeModel model34 = new GroupTreeModel(group34.getName(), group34.getId());

rootModel.add(model1);
rootModel.add(model2);
rootModel.add(model3);
rootModel.add(model4);
rootModel.add(model5);
rootModel.add(model6);
rootModel.add(model7);
rootModel.add(model8);
rootModel.add(model9);
rootModel.add(model10);
rootModel.add(model11);
rootModel.add(model12);
rootModel.add(model13);
rootModel.add(model14);
rootModel.add(model15);
rootModel.add(model16);
rootModel.add(model17);
rootModel.add(model18);
rootModel.add(model19);
rootModel.add(model20);
rootModel.add(model21);
rootModel.add(model22);
rootModel.add(model23);
rootModel.add(model24);
rootModel.add(model25);
rootModel.add(model26);
rootModel.add(model27);
rootModel.add(model28);
rootModel.add(model29);
rootModel.add(model30);
rootModel.add(model31);
rootModel.add(model32);
rootModel.add(model33);
rootModel.add(model34);

groupTreeStore.add(rootModel, true);
add(treePanel);
}
}

matling
21 Dec 2010, 7:29 AM
This does not fix the problem for me, the last few nodes are still not shown regardless of browser.

sven
21 Dec 2010, 7:31 AM
Works fine for me against GXT 2.2.1 in IE8 and FF 3.6.13