Please try the below zul, the idea is to be able to edit item1 and item2 using the same editor (ed). You can select which item to edit by clicking on the tree. Start by cicking on the tree and see how the editor value will change to reflect the item being edited. Now click on item1 in the tree and change its value to 'a' then click on item2 and change its value to 'b' now click on item1 again and change the value to 'c' continue this process and soon you will notice that the wrong item value is changed. Note that if you change the editor from fckeditor to a textbox then this works fine. Or if you use fckeditor but always click on a whitespace and then click on the tree then things work ok.
<window>
<zscript>
item = null;
</zscript>
<hbox>
<vbox>
Pick item to edit:
<tree
width="200px"
onSelect="selectItem(self.selectedItem)">
<treechildren>
<treeitem id="tree1" selected="true">
<treerow>
<treecell label="item1"/>
</treerow>
</treeitem>
<treeitem id="tree2">
<treerow>
<treecell label="item2"/>
</treerow>
</treeitem>
</treechildren>
</tree>
</vbox>
<vbox>
<fckeditor id="ed" onChange="updateItemValue(self.value)" visible="true"/>
<hbox><label value="Item1 value: "/><label id="item1" value="item1 initial value"/></hbox>
<hbox><label value="Item2 value: "/><label id="item2" value="item2 initial value"/></hbox>
</vbox>
</hbox>
<zscript>
<![CDATA[
item = item1;
updateItemValue(String newValue)
{
item.value = newValue;
}
selectItem(Treeitem treeitem)
{
//select item to edit
if (treeitem.id.equals("tree1"))
{
//alert("chose item1: " + item1.value);
item = item1;
}
else
{
//alert("chose item2: " + item2.value);
item = item2;
}
//associate the item to the correct editor
//alert("item: " + item.value);
ed.setValue(item.value);
}
selectItem(tree1);
]]>
</zscript>
</window>
Logged In: NO
I noticed that there is no problem if we use labels (instead of tree) to select the items. Not sure why there's a problem when tree is used (I need to use trees so using labels is not going to help me but might help in fixing the bug)
<window>
<zscript>
item = null;
</zscript>
<hbox>
<vbox>
Pick item to edit:
<label onClick="selectItem(self)" id="tree1" value="item1" style="color:blue;text-decoration:underline;"/>
<label onClick="selectItem(self)" id="tree2" value="item2" style="color:blue;text-decoration:underline;"/>
</vbox>
<vbox>
<fckeditor id="ed" onChange="updateItemValue(self.value)"/>
<hbox><label value="Item1 value: "/><label id="item1" value="item1 initial
value"/></hbox>
<hbox><label value="Item2 value: "/><label id="item2" value="item2 initial
value"/></hbox>
</vbox>
</hbox>
<zscript>
<![CDATA[
item = item1;
updateItemValue(String newValue)
{
item.value = newValue;
}
selectItem(Component treeitem)
{
//select item to edit
if (treeitem.id.equals("tree1"))
{
//alert("chose item1: " + item1.value);
item = item1;
}
else
{
//alert("chose item2: " + item2.value);
item = item2;
}
//associate the item to the correct editor
//alert("item: " + item.value);
ed.setValue(item.value);
}
selectItem(tree1);
]]>
</zscript>
</window>