Tree List Using ExtJS

Instructions

You can use templates for more than just html.
In this example, I use a hierarchical list template to output date in a JSON format suitable for the tree panel. I use this to populate the Navigation tree for this site also.

The biggest advantage of using lists and list templates is that you can use the built-in Apex "Conditions" functionality to hide or show list items.
I use this in my workplace to "customise" the tree based on a users role based privileges.

A second advantage is the tree data is part of the Apex application export, which means I don't have to remember to migrate data in application tables.

See "More Information" below for the template details.

Page Comments

Author

Comment

test

sdfsd

ddd

sdf

54454

wewe

The Chinese

Good work.

Test

Testing

Jim

So cooooool~

apex

plz share your whole code.

bu5kj7b8

dse

sassa

sdfsdf

hhhh

gffgggg

sffdfasddsadf

awsome

it's so awsome

jdfghdf

ghdfghdfghdfgh

Source Code

Below is the code for the page region containing the tree.

Notice that I declare tree array in the page region and not the template.
This allows me to keep the list template generic and reuse it for all my tree lists.

View the page source to see the actual output of the template.

Region Definition

Property	Value
TEMPLATE	Empty region (body, no title)
REGION_HEADER_TEXT	<script type="text/javascript"> var tree#REGION_ID# = [
REGION_FOOTER_TEXT	]; Ext.onReady(function(){ // show the same list in a window var win = new Ext.Window({ title: 'Tree Panel Window' ,closable:true ,border:false ,plain:true ,layout: 'fit' ,items:new Ext.tree.TreePanel({ loader:new Ext.tree.TreeLoader() ,width:200 ,height:400 ,autoScroll: true ,root:new Ext.tree.AsyncTreeNode({ leaf:false ,loaded:false ,expanded:true ,text:'Tree Root' ,children:tree#REGION_ID# }) }) }).show(this); }); </script>

List Template Definition

Property	Value
TEMPLATE_NAME	Ext.tree.TreePanel
LIST_TEMPLATE_CURRENT	{id:"#LIST_ITEM_ID#","text":"#TEXT#","href":"#LINK#","leaf":true}
LIST_TEMPLATE_NONCURRENT	{id:"#LIST_ITEM_ID#","text":"#TEXT#","href":"#LINK#","leaf":true}
LIST_TEMPLATE_BEFORE_ROWS
LIST_TEMPLATE_AFTER_ROWS
BETWEEN_ITEMS	,
BEFORE_SUB_LIST
AFTER_SUB_LIST	]}
BETWEEN_SUB_LIST_ITEMS	,
SUB_LIST_ITEM_CURRENT	{"id":"#LIST_ITEM_ID#","text":"#TEXT#","href":"#LINK#","leaf":true}
SUB_LIST_ITEM_NONCURRENT	{"id":"#LIST_ITEM_ID#","text":"#TEXT#","href":"#LINK#","leaf":true}
ITEM_TEMPLATE_CURR_W_CHILD	{id:"#LIST_ITEM_ID#","text":"#TEXT#","href":"#LINK#","leaf":false,"children": [
ITEM_TEMPLATE_NONCURR_W_CHILD	{id:"#LIST_ITEM_ID#","text":"#TEXT#","href":"#LINK#","leaf":false,"children": [
SUB_TEMPLATE_CURR_W_CHILD	{"id":"#LIST_ITEM_ID#","text":"#TEXT#","href":"#LINK#","leaf":false,"children": [
SUB_TEMPLATE_NONCURR_W_CHILD	{"id":"#LIST_ITEM_ID#","text":"#TEXT#","href":"#LINK#","leaf":false,"children": [
COMPONENT_COMMENT	Mark Lancaster 13-NOV-2008 -------------------------- Developers must ensure list is JSON escaped.

Property	Value
Rows Displayed