The node is just html so you would have to use renderTo...
I'm afraid I am no further along in figuring out how to implement this work although I do appreciate your taking the time to respond, Mitchell. As I am still trying, I decided to try what I thought would be an easier component to add and am submitting it as an example for my questions. Hopefully, someone out there can help me work my way through this so I can understand the correct way to go about implementing it in ExtJs.
For this example, I'm just trying to add an image to one particular type of node which will ultimately call a "remove" handler when the user clicks on that image. The scenario I'm trying to implement has the following requirements:
1. Only a Service can be removed, Layers cannot. This means only some nodes will have this "Remove" image, so it's insertion at runtime is dynamic; and,
2. Although my example hardwires the tree's contents before displaying the panel, in my application, it is also possible that the tree panel will already be displayed when a new Service (and its tree hierarchy) is added to it. I already have the code that does the appending/inserting of TreeStores into an existing panel.Tree. The reason I particularly mention this requirement though is because I can't figure out at what point in the process to create the Ext component when there is something to "renderTo" as suggested in the response above. But, I'm getting ahead of myself...
3. As suggested by the above requirement, I really have no idea how many "Services" will exist in the tree.
So, to start with the basics as regards the suggestion to "use renderTo". I have tried adding a unique <div> to each "Service" node's text in my tree and then creating an Ext.img that gets rendered to it. This "works" but exhibits the problems I mentioned in my original post. First, the image is placed below the node in question (rather than at the end of the node's text) and if you expand/collapse the node, the image is gone because the content has been refreshed with what's in its "raw" values where only the <div> is provided; the image isn't re-rendered.
Code:
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="/EMAF/ext-4.1.1/resources/css/ext-all.css">
<script type="text/javascript" src="/EMAF/ext-4.1.1/ext-all-debug.js"></script>
<title>Tree</title>
<script type="text/javascript">
Ext.application(
{
name: "myTree"
,launch: function(){
Ext.create(
"Ext.button.Button"
,{
renderTo: 'btn'
,text: "Open Tree Window"
,handler: openWindow
}
);
}
}
);
function openWindow(){
var treeStore = Ext.create(
"Ext.data.TreeStore"
,{
root: {
text: "HiddenRoot"
,children: [
{
text: 'Service 1 <div id="img1"></div>'
,service: new Object({url: "http://Service1"})
,children: [
{
text: "Layer 1"
,leaf: true
}
,{
text: "Layer 2"
,leaf: true
}
]
}
]
}
}
);
var pnlTree = Ext.create(
"Ext.tree.Panel"
,{
store: treeStore
,rootVisible: false
,hideHeaders: true
}
);
var myWin = Ext.create(
'Ext.window.Window'
,{
title: 'Layer Picker'
,width: 300
,height: 300
,layout: "fit"
,items:[
pnlTree
]
}
);
myWin.show();
Ext.create(
'Ext.Img'
,{
src: 'http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/esri/dijit/images/close.gif'
,renderTo:"img1"
}
);
}
</script>
</head>
<body>
<div id="btn"></div>
</body>
</html>
I am certain this method of implementation can't be what was meant by the suggestion, but I'm afraid I don't know how else to interpret it. Can anyone provide any additional insight?
Cheers,
jtm
Reply With Quote
