Refresh template based extjs tree dynamically...

In the last few posts i talked about how to use apex templates to create extjs trees and property grids. In this post i will show you how to refresh these regions dynamically....
Our report statement needs a special result set...

<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 />

Next thing we need is a template... I called mine "ExtJS_Tree_Report_With_Refresh".... It's basically the same as before....
Row Template 1

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

Row Template 1 Expression

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

Row Template 2

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

Row Template 2 Expression

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

Row Template 3

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

Row Template 3 Condition

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

Before Rows

<br /><div id="tree-div#REGION_ID#">[<br />

After Rows

<br />]}]</div><br /><script type="text/javascript"><br />  Ext.onReady(function(){<br />  initTreeRegion('#REGION_ID#');<br />  })<br /></script><br />

The function "initTreeRegion" looks like that....

<br />function initTreeRegion(pId) {<br />    var myDiv = $x('tree-div'+pId);<br />    var myData = Ext.util.JSON.decode(myDiv.innerHTML);    <br />        myDiv.innerHTML = '';<br />        new Ext.tree.TreePanel({<br />          renderTo: 'tree-div'+pId,<br />          border:false,<br />          id: 'REGION_'+pId+'_tree',<br />          cls: 'myTreePanel',<br />          margins: '2 2 0 2',<br />          autoScroll: true,<br />          rootVisible: false,<br />          root:{ "text": "rootnode",<br />                 "expanded": true,<br />                 "children": myData <br />                }<br />        });<br />}<br />

It just recreates the extjs tree using the json object generated by refreshing the report region via $a_report()....
You can now easily refresh every tree region like that...

<br />$a_report('9159609248948926','1','100');<br />initTreeRegion('R9159609248948926');<br />

You only need to know the ID of the region...
Have fun...

Post only available in english!