ExtJS tree via Apex report template....

This morning i needed to show some data in a simple ExtJS tree... Just a view categories with a few children each.... I could have created the needed json string with the pl/sql function i described in an earlier post, but i finally decided to build a little report template to use for this easy stuff...
That's what i came up with....

Create a new report template of type "Named Column (row template)"... I called mine "ExtJS_Tree_Report"...

Define the Row Templates as follows...

Row Template 1

<br />{  "text"     : "#CATEGORY#"<br /> , "expanded" : true<br /> , "leaf"     : false<br /> , "children" : [<br />                  {  "text" : "#NAME#"<br />                   , "id"   : "#ID#"<br />                   , "leaf" : true<br />                  }<br />

Use Based on PL/SQL Expression:

<br />#ROW_ASC#=1 and #ROWNUM#=1<br />

Row Template 2

<br />]},{  "text"     : "#CATEGORY#"<br />    , "expanded" : true<br />    , "leaf"     : false<br />    , "children" : [<br />                    {  "text" : "#NAME#"<br />                     , "id"   : "#ID#"<br />                     , "leaf" : true<br />                    }<br />

Use Based on PL/SQL Expression:

<br />#ROW_ASC#=1 and #ROWNUM#!=1<br />

Row Template 3

<br />,{  "text" : "#NAME#"<br />  , "id"   : "#ID#"<br />  , "leaf" : true<br /> }<br />

Use Based on PL/SQL Expression

<br />#ROW_ASC#!=1<br />

Before Rows

<br /><div id="tree-div#REGION_STATIC_ID#"></div><br /><script type="text/javascript"><br />Ext.onReady(function(){<br />  new Ext.tree.TreePanel({<br />            renderTo    : 'tree-div#REGION_STATIC_ID#',<br />            border      : false,<br />            id          : 'tree-panel',<br />            margins     : '2 2 0 2',<br />            autoScroll  : true,<br />            rootVisible : false,<br />            root:{ <br />                 "text"     : "rootnode",<br />                 "expanded" : true,<br />                 "children" : [<br />

After Rows

<br />     ]} <br />   ]}<br />  }); // new Ext.tree.TreePanel...  <br />}); //Ext.onReady...<br /><br /></script><br />

Now, create a new report region in your page with the following statement...

<br />select  dname as CATEGORY<br />      , empno as ID<br />      , ename as NAME<br />      , rank() over (partition by emp.deptno order by empno asc) as ROW_ASC<br />from emp, dept<br />where emp.deptno=dept.deptno<br />

These are the minimum columns my report template needs...
In the report attributes select your created report template and disable pagination...
That's it... Your result should look like this....