Nov 21, 2011, 9:16 PM
[CLOSED] Adding additional markup to selected TreePanel node
I have a TreePanel. When a node is selected I need to add additional markup to the right of the selected node text. Initially I tried using the setText() method; i.e. node.setText(node.text + "<b>test</b>"); but this causes a cross-site scripting error on AjaxRequests. I guess the text can't include tags.
I then tried setting the innerHTML for the selected node. This works fine, except that the node elbows no longer display correctly. The following, based on your TreePanel example, demonstrates the problem;
1) Expand/Collapse the Beethoven node. The expand icon shows 'plus' when collapsed and 'minus' when expanded.
2) Now select the Beethoven node. The additional markup is correctly added to the right of the node text. However the expand icon no longer changes when the node is expanded/collapsed.
How can I add the markup and still get the node elbows to display correctly?
- thanks
I then tried setting the innerHTML for the selected node. This works fine, except that the node elbows no longer display correctly. The following, based on your TreePanel example, demonstrates the problem;
1) Expand/Collapse the Beethoven node. The expand icon shows 'plus' when collapsed and 'minus' when expanded.
2) Now select the Beethoven node. The additional markup is correctly added to the right of the node text. However the expand icon no longer changes when the node is expanded/collapsed.
How can I add the markup and still get the node elbows to display correctly?
- thanks
<head runat="server">
<title></title>
<script type="text/javascript">
function nodeSelect(sel, newNode, prevNode) {
newNode.ui.elNode.innerHTML += "<b>test</b>";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:TreePanel ID="TreePanel1" runat="server" Width="300" Height="450" Icon="BookOpen" Title="Catalog" AutoScroll="true">
<Root>
<ext:TreeNode Text="Composers" Expanded="true">
<Nodes>
<ext:TreeNode Text="Beethoven" Icon="UserGray">
<Nodes>
<ext:TreeNode Text="Concertos" />
<ext:TreeNode Text="Quartets" />
<ext:TreeNode Text="Sonatas" />
<ext:TreeNode Text="Symphonies" />
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Brahms" Icon="UserGray">
<Nodes>
<ext:TreeNode Text="Concertos" />
<ext:TreeNode Text="Quartets" />
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Mozart" Icon="UserGray">
<Nodes>
<ext:TreeNode Text="Concertos" />
</Nodes>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
</Root>
<SelectionModel>
<ext:DefaultSelectionModel>
<Listeners>
<BeforeSelect Fn="nodeSelect" />
</Listeners>
</ext:DefaultSelectionModel>
</SelectionModel>
</ext:TreePanel>
</form>
</body>
Last edited by Daniil; Nov 22, 2011 at 3:52 PM.
Reason: [CLOSED]