Usage

The usage of the XLoadTree is almost identical to the xTree so if you do not remember how that is done take a look at the xTree usage. Anywhere the original xTree accepts a WebFXTree you can use a WebFXLoadTree and the same applies to WebFXTreeItem and WebFXLoadTreeItem.

Taking the first example in the xTree usage and instead of using a WebFXTreeItem for the second tree item we use the load counterpart.

var tree = new WebFXTree("Root");
tree.add(new WebFXTreeItem("Tree Item 1"));
tree.add(new WebFXLoadTreeItem("Tree Item 2", "tree.xml"));
tree.add(new WebFXTreeItem("Tree Item 3"));
document.write(tree);

The code above should result in something looking like this:

When Tree Item 2 is expanded the file tree.xml is loaded and during the load a dummy tree item is inserted to show that the subcontent is loading. This looks something like this:

The XML format

To be able to transform the xml file to an xTree the xml file must be of a certain format. Below is the xml code from the file tree.xml:

<?xml version="1.0"?>

<tree>
   <tree text="Loaded Item 1" action="href://webfx.eae.net" />
   <tree text="Loaded Item 2">
      <tree text="Loaded Item 2.1" action="javascript:alert(2.1)" />
      <tree text="Load &quot;tree1.xml&quot;" src="tree1.xml" />
   </tree>
   <tree text="Loaded Item 3" />
</tree>

When this xml file has been loaded and inserted into the tree it looks something like this:

Notice how the XML structure can contain nested tree items and tree items that points to other xml files. Notice also the top level tree item that is used to contain all the tree items that are supposed to be inserted into the current WebFXLoadTreeItem.

To see what xml attributes are supported on the tree items see the api page.

Introduction
Usage
API
Implementation
Demo
Download

Author: Erik Arvidsson