tree element in firefox sidebar with dynamic elements and click functionality

Question

I have created an extension to show a sidebar in firefox. Now i need to display a tree like structure where the third level will be dynamic and loads a particular link on clicking. I know how to create the three level hierarchy but with static data.. heres the code

  <treechildren>
    <treeitem container="true" open="true">
      <treerow>
       <treecell label="Guys"/>
     </treerow>

     <treechildren>
       <treeitem>
         <treerow>
           <treecell id="cell-of-treeitem1" label="Bob" onclick="alert('bob')"/>
       </treerow>
       </treeitem>
       <treeitem>
         <treerow>
           <treecell label="Jerry"/>

         </treerow>
       </treeitem>
    </treechildren>
   </treeitem>
 </treechildren>

The onclick does not showup anything

1)How can i implement the link functionality.. as in a link to be opened on clicking a treecell element? The "onclick" attribute doesnot work. Also and can i run javascript functions on clicking of the individual items.

2) How can i have a dynamic list displayed. suppose i have a JS function that reurns a list, how can i show it here as tree elements (basically then the js should run everytime i expand the tree parent to see the children)

Answer 1

First, place the onclick event handler on the tree itself, not on the elements. When the user clicks on a cell, because of the event bubbling, the tree will catch it, no matter which cell receives the click:

function clickedOnSomething(event) {
    if(event.originalTarget.localName == "treechildren") {
        //do something here based on who is event.originalTarget
    }
}

Second, to create the content dynamically, you create an empty tree in XUL:

<tree id="myTree" onclick="clickedOnSomething(event)" flex="1" seltype="single">
    <treecols>
        <treecol id="myCol" label="Stuff" primary="true" flex="1" />
    </treecols>
    <treechildren/>
</tree>

Then in JavaScript, you create an object that implements the nsITreeView interface (see link below), and assign it as the view of the tree you created in XUL.

This object will serve as a interface for the Tree widget to the data will allow the tree to update itself automatically if the data changes.

You can find more information about custom tree views here: https://developer.mozilla.org/en/XUL_Tutorial/Custom_Tree_Views